Consolidation of Descendant Selectors Using JavaScript

QUESTION: How does one use Javascript to apply a CSS rule to a descendant set of selectors?
BACKGROUND
With each <li> tag (shown) there is associated a unique <body> tag (not shown). Further, each <li> tag is grouped together with other <li> tags under the same <div> tag (shown). All tags involved in this rule are uniquely identified with an id attribute. Obvious, perhaps, there will be a unique webpage for each <li> tag.
By way of example, if I were writing the rule for the tag <li id="setting"> of a single page, I would write it as follows:
body#bodysetting div#probablepast li#setting {
background-color:#AAA;
color:#000;
Note that the id of the <body> tag in the above example was obtained by prepending the word body before the id of the <li> tag.
OBJECTIVE: With there being so many <li> tags, I am thinking that I should write a JavaScript that would repeat the above pattern for each and every tag.
PROPOSAL: For the moment, I am considering placing the <div> tag identifiers in one array, the <li> tag identifiers in another array, and then creating still another array for the <body> tag identifiers by prepending the word body to each element of the <li> tag array. A set of loop statements would then concatenate the tags and identifiers for each <li> tag into a single set of descendant selectors such as I have provided above and generate the same CSS rule for each new page when it opens.
DISCLAIMER: I realize that it would be sufficient to simply use the id of each <li> tag, but I would like to preserve the above structure for the sake of logical coherence and in anticipation of other behaviors that I have yet to develop.
THE SELECTORS
div#probablepast
li#setting
li#resistance
li#ideology
li#containment
li#reforms
li#deception
div#popularpresent1
li#peaceful
li#industrious
li#studious
li#polite
li#difficult
li#closed
li#traditional
li#unique
div#popularpresent2
li#authoritarian
li#mercantilist
li#hightrust
li#collective
li#ricevillage
li#neurotic
li#racialpurity
div#bridgingthegap
li#gap
li#identity
li#shadows
li#dilemma
li#moreunique
div#contemporaryjapan
li#auntmadoka
li#chishiki
li#instruction
li#worldwithin
li#pyrimidal
li#gaijinsama
div#overcomingthebarriers
li#culture
li#genes
li#nationalidentity
li#bordercrossing
li#language

Murray *ACE* wrote: I am confused as to why you would want to style each list element uniquely. It obviously is something of great importance (although I cannot think of an instance where I would want to do such a thing).
With a little help you probably can:
body#bodysetting li#setting {style definition}
and
li#setting {style definition}
are not the same when the page is constantly changing as it does with "persistent page indicators".
Murray *ACE* wrote: In that case, using javascript to accomplish something of great importance is a risky thing to do....
Yes and no. My Google stats tell me that 97% of my viewers are using Javascript when they view my pages. This is an extraordinarily high proportion that is well worth targeting. I can dream about the luxury of 100% accessibility after I begin receiving my expected book royalties.
For some, being generous is a way of life. For others, it is a way of making a name for themselves while engaging in legalized tax evasion. For me, it is a feeling that ebbs and flows according to the behavior of those who stand to benefit from my generosity.
Thank you for your continued interest.
Roddy

Similar Messages

[svn:fx-trunk] 11593: Advanced CSS fix - descendant selectors should search for arbitrary ancestors including when the universal selector is used .

Revision: 11593
Author:   [email protected]
Date:     2009-11-09 15:20:36 -0800 (Mon, 09 Nov 2009)
Log Message:
Advanced CSS fix - descendant selectors should search for arbitrary ancestors including when the universal selector is used.
QE notes: Please add test cases for arbitrary ancestor depth that involve using the universal * selector. Thanks for the additional testing on this patch too!
Doc notes: N/A
Bugs:
SDK-23213 - descendent selectors can't catch components more than one level down
Reviewer: Corey
Tests run: Checkintests, test case
Is noteworthy for integration: No
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-23213
Modified Paths:
    flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/CSSSelector.as

Welcome guy -
Unless you are using Spry menus as a learning experience, you should move forward to a menus system that will display properly on the millions of portable devices that won't work with Spry which was deprecated 2 years ago.
Many are using JQuery menus or pure HTML/CSS menus.
If you wish to continue your Spry for learning experience, we'll be glad to assist; please let us know.
By the way, your submenus are not showing because you need to add the red value to this rule in your vertical CSS
ul.MenuBarVertical ul.MenuBarSubmenuVisible{
    width: 220px;
    left: 180px;

[svn] 3734: Fixing advanced CSS descendant selectors for the alpha release.

Revision: 3734
Author: [email protected]
Date: 2008-10-17 22:13:34 -0700 (Fri, 17 Oct 2008)
Log Message:
Fixing advanced CSS descendant selectors for the alpha release.
- We now check descendant types against any superclass.
- Removed StyleProtoChain.getClassStyleDeclarations()'s recursive "Class" lookup for each superclass of an IStyleClient during the search for type selectors in the hierarchy. This was replaced with a simple describeType-based description (called once per type).
- Added a method to report whether any advanced styles had been registered with the StyleManager to optimize style declaration matching for the default case of simple style declarations.
- Removed advanced selector cache key calculation from StyleProtoChain in favor of the legacy simple type level cache. Future work may be required to cache advanced, display list sensitive style information.
- Fixed the specificity calculation for global selectors.
QE: Yes
Doc: No.
Checkintests: Pass
mxunit styles tests: Pass
select mustella styles tests: Pass
Reviewer: Glenn
Bugs:
SDK-17351 - [Advanced CSS] Descendant selectors don't work for Application
SDK-17361 - [Advanced CSS] If you use descendant and id selectors together, the id selector doesn't work correctly
SDK-17385 - [Advanced CSS] If you use descendant and class selectors together, the class selector doesn't work correctly
Ticket Links:
http://bugs.adobe.com/jira/browse/SDK-17351
http://bugs.adobe.com/jira/browse/SDK-17361
http://bugs.adobe.com/jira/browse/SDK-17385
Modified Paths:
flex/sdk/trunk/frameworks/projects/framework/src/mx/core/UIComponent.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/CSSSelector.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/CSSStyleDeclaration.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/IAdvancedStyleClient.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/IStyleManager3.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/StyleManager.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/StyleManagerImpl.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/styles/StyleProtoChain.as
flex/sdk/trunk/frameworks/projects/framework/src/mx/utils/NameUtil.as
flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/css/StyleDef.vm
flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/css/StyleModule.vm
flex/sdk/trunk/modules/compiler/src/java/flex2/compiler/mxml/gen/ClassDefLib.vm

How can I automatically close a dialog box using Javascript after I click the OK button to submit it?

How can I automatically close a dialog box using Javascript after I click the OK button to submit it? I don't want to have to X out of the dialog box after I am done.
Thanks
Linda

JS can not interact with open dialogs in any way, unless it's a dialog
created in JS using the Dialog object.
On Thu, Jul 24, 2014 at 11:13 PM, lindaeliseruble <[email protected]>

How to retrieve value of one column to other in Apex using Javascript

Hi all,
Can any one help me in solving this problem.
How to send a value from one column to another column using javascript in Apex. I heard that we can use onChange().
My requirement is,
I have a column(Varchar2) in form where i need to enter a value and the data need to be sent to another column(Number) when i press apply changes.
ex: if i enter a value say 1/3 or 1/4 or 1/3*1/6
the result should be entered in the other column.
Message was edited by:
Raman

Try something like
html_GetElement('P1_ITEM2').value = eval(html_GetElement('P1_ITEM1').value);

How to show modal window without popup in a web page using javascript

Hi,
How to show modal window without popup in a web page using javascript, means when the modalwindow is opened it should not ask for popup blocker alert......
pls help me.....

Thanx for ur reply,
Actually the senario is when i click on a button, another jsp page should be displayed in a modal window without popup, but the functions alert() and confirm() will not accept the url path of the another jsp page...

How to create new subsite while adding new item to the list by using javascript?

hi,
I hav a task ie, when I add item to the list then subsite will create with that list item title and description . So By using javascript, I have to create subsite while adding new item to the list.
Help me to solve this.
Thank you,

Is your item getting added through Javascript client object model ? If yes, you can write in the success delegate of your list creation method the logic to create the subsite.
function CreateListItem()
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('List Name');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', 'My New Item!');
oListItem.set_item('Body', 'Hello World!');
oListItem.update();
clientContext.load(oListItem);
clientContext.executeQueryAsync(Function.createDelegate(this, this.CreateListItemOnSuccess), Function.createDelegate(this, this.onQueryFailed));
function CreateListItemOnSuccess() {
var subsiteTitle = oListItem.get_item('Title');
//Logic to create a subsite
function onQueryFailed(sender, args) {
I have added a sample flow for the above scenario. Have a look at the following lnk for how you can craete a subsite using ecmascript.
http://ravisoftltd.wordpress.com/2013/03/06/sharepoint-2010-create-site-with-ecma-script-with/
Geetanjali Arora | My blogs |

How to get page number from the PDF using Javascript

Hi,
We are having list of Single page PDF. The pdf are named in the order,
ISBN_Author_01.PDF (with real page number as i)
ISBN_Author_02.PDF (with real page number as ii)
ISBN_Author_03.PDF (with real page number as iii)
ISBN_Author_04.PDF (with real page number as 1)
ISBN_Author_05.PDF (with real page number as 2)
ISBN_Author_06.PDF (with real page number as 3)
ISBN_Author_nn.PDF (with real page number as 500)
Here each pdf has a page number and in sequential order.
The task is to check whether all the pdfs are in sequential order (i.e i, ii, iii, 1, 2, 3). If any page is missing, the script should throw an error report.
To do this task, I am writing a Javascript to get the real page number from the PDF.
Can anybody help me how to get the page number from the PDF using Javascript.
Thanks,
Gopal

The "real" page number within a PDF is the count of the physical page starting at 0, zero.
pageNum numPages
The number printed on each page is the page label.
setPageLabels getPageLabel
You will have to open each PDF and your script would need to know the page label for that file. I would expect you would need to build a 2 dimensional array of the file names and the page label for the page within that array.

How to get values from a table(in jsp) for validation using javascript.

hi,
this is praveen,pls tell me the procedure to get values from a table(in jsp) for validation using javascript.
thank you in advance.

Yes i did try the same ..
BEGIN
select PROD_tYPE into :P185_OFF_CITY from
magcrm_setup where atype = 'CITY' ;
:p185_OFF_CITY := 'XXX';
insert into mtest values ('inside foolter');
END;
When i checked the mtest table it shos me the row inserted...
inside foolter .. Now this means everything did get execute properly
But still the vallue of off_city is null or emtpy...
i check the filed and still its empty..
while mtest had those records..seems like some process is cleaining the values...but cant see such process...
a bit confused..here..I tried on Load after footer...
tried chaning the squence number of process ..but still it doesnt help
some how the session variables gets changed...and it is changed to empty
Edited by: pauljohny on Jan 3, 2012 2:01 AM
Edited by: pauljohny on Jan 3, 2012 2:03 AM

Problem with using javascript in interactive adobe form

Hi All,
I have a problem when accessing text field value which is present inside a subform using javascript.
I tried giving data.page4.sub-5.<fieldname>.rawvalue but its not working. Please provide a solution.
Thank you in Advance.

Since this question is related to JavaScript running within the Form and not the connection between the form and Web Dynpro - it really belongs in the Interactive Forms by Adobe Forum.

Using Javascript and ScriptUI to create a form that brings in a symbol from library

Hello everyone,
I've been trying to pull together the right info to use javascript to create a form to bring in particularsymbols from the symbol library based on the variables taken from the form. I've taken bits and pieces from various sample scripts and tried to make this work, but my problem appears when I try to use conditionals.
This is a limited version of what I want to do, but it is enough to get the point across.
1. I want to select a script that has various dropdown boxes. I would like the first dropdown to give me 3 options: 10, 13, 18
2. I would also like another drop down box that gives me three more options: single needle, double needle, and knife edge.
3. I would then like it to have an "ok" button and "Cancel" button.
4. From here when I click the ok button, a symbol is brought in from the library depending on what parameters were given to the form.
ex. If I selected 10 in the first drop down and double needle in the second, I would like "SYMBOL A" to be pulled from the library and centered on the artboard.
ex. If I selected 13 in the first drop down and double needle in the second, I would like "SYMBOL B" to be pulled from the library and centered on the artboard.
I've gotten the UI to pop up and it works as planned as well as bringing in a symbol, my problem comes when I try to incorporate conditionals and functions.
Here is my script. Please let me know what I'm doing wrong.
var myDoc = app.activeDocument;
var Pallette = new Window ("dialog", "Create a Shell");
Pallette.add ("statictext", undefined, "Fill Opening in Inches:");
Pallette.orientation = "row";
var myDropdown = Pallette.add ("dropdownlist", undefined, ["10", "13", "18"]);
myDropdown.selection = 1;
var myButtonGroup = Pallette.add ("group");
myButtonGroup.orientation = "column";
var btnCreate = myButtonGroup.add ("button", undefined, "OK");
MyFillSelection = myDropdown.selection
btnCreate.onClick = function () {
    if ( MyFillSelection = "13") {
               symbolRef = myDoc.symbols["SYMBOL A"];
        symbolItemRef1 = myDoc.symbolItems.add(symbolRef);
       redraw();
var btnCancel = myButtonGroup.add ("button", undefined, "Cancel");
Pallette.show ();
If anyone has any input, it would be much appreciated.
thanks,

MyFillSelection = myDropdown.selection is outside the function, so it will always read "13", nothing is making the value change.
move that line into your function and add the text property to it...MyFillSelection = myDropdown.selection.text;
then do your if comparisons, that will do it.

Can I use JavaScript to force objects to overlap a Web Object in Captivate 7?

Hi, so I have all of these great ideas for using Web Objects to enhance my courses, but am discouraged by the fact that I can't seem to get anything to overlap a Web Object. The only thing I can seem to get to overlap a Web Object is another Web Object. I have found that buttons seem to still work under the Web Object (which is good) but I really would like to know of a way to allow things on the Captivate timeline to be viewed on top of them. Things like text fields and images.
I've seen posts about how to use JavaScript to have the menu show above Web Objects, but that code doesn't seem to work for regular objects. I read that Web Objects sit in an "<iframe>" tag and that that forces it to appear above everything else. I'm left wondering if it is possible to get around this by somehow putting Captivate objects in an <iframe> of their own with JavaScript? Or is there some other way? Does anybody know any JavaScript I can apply to Captivate objects to get them to appear above a Web Object?
Thanks,
Dan

So I have come to learn that the "<iframe>" tag for a Web Object is simply a window that sits on top of the course. Now I'm wondering if anyone has an effective method for importing flash quality animation (in whatever form) that can sit underneath of Captivate objects and still be HTML5 compliant?
Thanks,
Dan

How to pass a single quote in a URL using Javascript

Can someone tell me how to pass a single quote in a URL using Javascript. I have created a Javascript funciton in which I pass several column values from an APEX report.
The URL for the report link I am using is "JAVASCRIPT:passBack('#EMP_ID#','#Name#','#e-mail#')"
The problem occurs with the Name and e-mail columns contain a single quote (i.e. James O'Brien)

Thank you Saad, that worked.
Since I built the report using type 'SQL Query (PL/SQL function fody returning SQL query)' I had to add some additional quotes to get it to work.
i.e.
replace(EMP_EMAIL_NAME,'''''''',''\'''''')
or
replace(EMP_EMAIL_NAME,chr(39),''\'''''')
Thanks for the help,
Jason

Child Report Window Size XI 3.0 SP2 Using Javascript

Hi All,
I have to admit this is not my area . I'm trying to get a new webi report in a sizeable window using javascript. I want to achieve this by selecting an open doc link from an existing webi report.
We have been trying with the code below but get the 404 Missing Page error.
We have been trying to get this to work on Edge. Do I need to install any SDK on to the system to get this to work? Can anyone let me know the steps, please.
Thanks...
Mark
Code:
"<a href=__\"javascript:window.open('../../opendoc/openDocument.jsp?iDocID=Aa252KU2ReBDm4TkGkVTOLM&sIDType=CUID&sType=wid&sReportPart=UIREF%3ARID%3D1005%3ABID%3D1008&mode=Part&sRefresh=N&sWindow=New','SAMPLE ','width=350,height=250') \" title=\"\" target=\"_self\" nav=\"doc\">"[Actual].[Kpi Group]"</a>"

Thanks for the response Guys.
I have done a bit more digging and I think that you can only create a link referencing Java script in a crystal report, not Webi?
One way I thought of getting round this is to create a copy of opendocument.jp and add my Java script, in there, to resize my child window.
Any comments or experiences to share?
All the Best,
Mark.

How to pass value to pop up window using javascript function?

I am not sure how to do this, I want to open new window from existing form,This is Mod/PLsql for consists some javascript functions also. When I am clicking on new window in form then new form should open with results of value entered,but new window form is opening with main page :( , not able to get text box value from parent form. How to call textbox input value in popup window from parent window using javascript?
currently I'm using following code:
HTP.p('<script type="text/javascript">
function pop_up5()
var l_url=window.opener.document.getElementById("p_single_store_pc").value;
window.open(l_url, '''', ''fullscreen=no, scrollbars=1'');
</script>' );
Edited by: user11970612 on Jun 14, 2012 5:02 AM

this is probably due to the Javascript code and not a "real link" to another page... I don't know if the null is due to the Javascript...
But if you really really want to use javascript instead of a ... you can pass the location of the url with JSP (on your main page) as a parameter to the open window... (...) u can put instead of main.jsp <%= request.getServerName()+request.getRequestURI() %>
the value <%= ... %> will return something like test.com/html/main.jsp
Hope this helps.

Consolidation of Descendant Selectors Using JavaScript

Similar Messages

Maybe you are looking for