swirlingDervish

"...IOW....to open the description page, then open the description it is..." (sorry)...

I figured it might be messy. I guess I want to save the work of having to throw a stylesheet on every page with more client-side heavy code and re-position all my elements on each page to accommodate a couple of descriptions that already have a dedicated webpage. The two description buttons are on each page of the website, so it just seems easier to go directly to the dedicated page, then call up the description. IOW, I want the description nav buttons to open the description, then open the description it is. Am I going at this the wrong way? www.siddhicenter.org - home www.siddhicenter.org/Inner/Space/Descriptions.htm - definition-descriptions

Maybe I'm over-thinking this...? Could I send an onload method over the query string and then execute once it's been parsed?

Great parser, davej, but I'm not just trying to parse a string for the div, I'm trying to parse a function sent as a string passed by POST to be executed on the div of the new page. Foxy Mod is saying I can't... Maybe if I include some pages: www.siddhicenter.org and www.siddhicenter.org/Inner/Space/Descriptions.htm. The buttons on the home page "Mantra Yoga" and "Guru Yoga", when clicked, should open the Descriptions.htm page and on loading, open the script already on that page to open the passed description number that corresponds with the above Yogas. Hope that might be a little clearer, thanks....

So, Ingolme, I wouldn't have to use a form structure, right?, to actually send the parameters through the query string, just a variable declaration...? And davej, all files are on the same domain. "Open a div", I meant return a div's innerHTML through JS. JS can decode a GET but not a POST? Is that because of POST's header info?

I'm trying to, based on a button click, redirect to another webpage within a domain and then open a div on that new page, all by Javascript. Is that possible? I've searched the forum and Stackflow and found similar but not quite, answers: most want to call the function from the present page they're on. Any thoughts?

Hey, justsomeguy, thanks also for your mozilla link, very informative. Tried the "if" clause check of array length, but it didn't take....grrr....but I'll keep checking. Thanks for your input. Guess I'd better break down and do the jQuery dance..

dsonesuk, I'm humbled by your mighty effort! Thanks, as I'm definitely getting the message from a few coders, that jQuery be the cross-browser bomb! Hitting the tutes as soon as I can! Thanks so much again, I'm reviewing as we speak...

I'll update if I'm able to find a solution...

Hoped maybe someone would respond, but anyways...I found part of my solution as I've managed to get my CSS fade animation to load through my quote array, but not the actual fading in and out of the animation: JS: function myQuotes (){ quoteRay = []; quoteRay[0]="quote1"; quoteRay[1]="quote2"; quoteRay[2]="quote3"; quoteRay[3]="quote4"; quoteRay[4]="quote5"; quoteClr = []; quoteClr = ["orange","purple","orange","pink","green","red","blue","brown","gold","purple"]; var anim1=document.getElementById("sayArry1"); var quotePick=quoteRay; anim1.innerHTML = quotePick; var qtClr=quoteClr; anim1.style.color = qtClr; anim1.style.animation = "fadeInOut 15s ease 1s 1"; i++; } var i = 0; var quoteUp = window.setInterval (function(){myQuotes()}, 15000); .................... and I can't seem to get an "if" conditional that works to check last entry of the quote array so as to loop again. I must say, w3chools' tutorial on setInterval is a little confusing, so I checked some others and JSFiddle, which clued me into making a function in a loop being not good JS - good to know. Anyways, I'm still working on trying to get the fade effect to work, any advice out there?...

Hi, davej and all....maybe a link would be helpful?.... http://www.kailashyog.org/soultour/KailashQuotes.htm

Thanks for your response, davej. I am learning to work with Chrome's debugger, which was a little unclear to me. I put my code through jsfiddle and, you're right, had to do some cleanup, although, having done that, I still have my "just showing the last quote" problem. JSFiddle indicates I shouldn't "make a function within a loop", pointing at my eventListener line. Is that a js best practice? So instead, should I do something like: <<anim1.style.animation = "fadeInOut 15s ease 1s 1";>> and then do a setInterval or Timeout?...

Hello, All. Swirling noob here, and I'm trying to fade in and out a div that will load quotes from an array and I gotta admit, I'm a bit confused as to when, where and if to use an eventListener or window.setInterval or Timeout or what (sorry I don't know jQuery yet).... I can't get the animation to fully apply to each quoteRay entry and the syntax is kicking my butt: JS: /* Trying to load a quoteRay entry, apply color to the font, then read the CSS animationend trigger. */ function myQuotes (){ quoteRay = new Array; quoteRay[0]="quote #1" quoteRay[1]="quote #2" quoteRay[2]="quote #3" quoteClr = new Array; quoteClr["orange","purple","red"]; for (var i=0 && quoteRay!='undefined'; i<quoteRay.length; i++){ var anim1=document.getElementById("sayArry1"); var quotePick=quoteRay; anim1.innerHTML = quotePick; var qtClr=quoteClr; anim1.style.color = qtClr; anim1.addEventListener("webkitAnimationEnd", function(){ alert("Fin");}, false); } } CSS: div#sayArry1 { position:absolute; width:315px; height:250px; top:200px; left:400px; color: #000000; text-shadow: 1px 1px #a1a1a1; animation:fadeInOut 15s infinite; -webkit-animation:fadeInOut 15s infinite; /*Safari, Chrome*/ } @keyframes fadeInOut { 0% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} 100% {opacity:0.0;} } @-webkit-keyframes fadeInOut /* Safari and Chrome */ { 0% {opacity:0.0;} 15% {opacity:1.0;} 95% {opacity:1.0;} 100% {opacity:0.0;} } HTML: <body onLoad ="myQuotes();> <div id="sayArry1" style="width: 568px; height: 250px" >Free me...</div> It's not loading the other quotes, altho it is cycling through the array, nor is it waiting through animation time....aaaah! Help. Thank you.

Hi, dsonesuk, been a couple of hectic days....thanks for your response. I had to do a quick review of pseudo elements again to be sure of where to target and when to reference. Tried your bennies code, which works almost perfectly, except that now the div#bennies text is taking the faded settings of the backsplash (which I wanted to avoid). Instead, I took your first suggestion of removing the :before off the separate backsplash element div#jsGall2 and it finally worked. I'll just do a llittle padding tweaking as you suggested and that should clean it up the bottom overrun. Thanks for your help.

....maybe a link might help?...: http://siddhicenter.org/KY/KailashDescrip.htm. The second description button, mantra yoga, is the one where I want to backsplash to equal the height of the div#bennies which holds the text.... Any thoughts?....

Hi, dsonesuk, I see what you mean about the inline style. It's almost like you have to create a new "instance" of bennies to get the present attributes of the element. Anyways, while var f now shows a height value, the value is still not passed to jsGall2's height attrib so the div's height will change. Not sure how else to pass the value...

Aaah, football fan! Hi, Don E, thanks for responding, altho, after trying it out, I wish I could say your suggestion worked, oh well! Would offsetHeight be more accurate than just style.height...? Would it be better if I used set- and/or getAttribute()?

Hi, all, Swirling Dervish noobie here, and I can't seem to get one page element to "inherit" the height value of another: js: /* quotepick is the holder for the chosen display quote from the defText array; i is the index of the quote from the definition (defText) array; the goal is to get the div#jsGall2 (a backsplash to text) to inherit div#bennies' (text against the backsplash) height value. */ var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = eSize.setAttribute ("style", eval(dSize.style.height)); /* one version */ } else { document.getElementById("bennies").innerHTML=''; } I'VE ALSO TRIED: var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = eSize.style.height = dSize.style.height; /* another version */ } else { document.getElementById("bennies").innerHTML=''; } I know I've gotta be mucking up royally in syntax, right? Help.... -Swirling...headache...

I should have refreshed first.... ...still? curious about those selectors from your first post...

Hi, dsonesuk. Wow, I kno I need a selector lesson! Ummm, "#fader ~* {...}"? I kinda get "/" in its present placement, but...ok....help...

Yeah, justsomeguy, guess I'm not really grasping the proper timing or syntax for use of pseudo classes and elements yet; 'scuse my noobiness while I learn...the "empty div" (background-image is in the CSS for the div) I was reading in a couple of tutorials, was to apply outside-of-DOM attributes, but I think dsonesuk is saying I can use regular ol' divs for an empty div... Thanks, dsonesuk, I'll try out and update. Any tips or links on understanding when I should use pseudo classes and elements?...

Thanks, justsomeguy...um, yeah...http://siddhicenter.org/Inner/Space/Testimonials.htm. You need more CSS?

No one has any ideas??!...please help. I'm trying both the class and elements version of applying this div and it's not working....

Oops, I did see one error of adding "class="fader" to body, but even after removing, still no go......

Swirling noob here with another really basic headache for the gods of code: I'm learning pseudo classes and elements while trying to fade my body background image ONLY. I either end up fading everything (including text content) or nothing at all: CSS: #chgBack {background:#081132 url("../images/Fog2.png") no-repeat top center; background-size: 1290px 1300px; -moz-background-size:1290px 1300px; -webkit-background-size:1290px 1300px; margin:0px; padding:0px; } .fader:after { content: ""; opacity:0.5; filter:alpha(opacity=50); top: 0; left: 0; bottom: 0; right: 0; position:fixed; z-index:-1; } HTML: <body id="chgBack" class="fader" > <div class="fader" style="position:absolute; width:100%; height:100%;"> </div> ... <div id="testimos"> /* text element with lovely words over the background */ </div> ... </body> ...followed by a plaintive cry for help from a nesting baby noob! Thanks, all.