Jump to content

swirlingDervish

Members
  • Posts

    60
  • Joined

  • Last visited

Posts posted by swirlingDervish

  1. 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

  2. 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.... :umnik2:

  3. 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..

  4. 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...

  5. 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?...
  6. 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?...

  7. 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.

  8. 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.

  9. 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... :umnik2:
  10. 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?...

  11. Swirling noob here with another really basic headache :facepalm: 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.

     

     

×
×
  • Create New...