Databases
StackOverflow2013
Postsdbo
POscrolltop javascript button - how to hide div at page load
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POscrolltop javascript button - how to hide div at page load
    primarykey
    data
    text
    <p>I am trying to tinker with a javascript scroll to top button but have run into a slight issue with the div element when the page first loads the div appears then fades out straight away rather than being hidden from the get go. The script then performs as expected (t the bottom of the page the div fades in and fades out if the user returns to the top (either by clicking the button or manually scrolling).</p> <p>I know why the div is appearing then fading out at the start - its because I am loading the div, then immediately calling the fadeOut() method. However, I am not sure how to do it a better way (i.e. to make it so the div starts hidden. I have tried using display:none but that stopped it appearing all together.</p> <p>ANy advice would be greatly appreciated.</p> <p>I have experienced this issue in firefox</p> <p>Code:</p> <pre><code>//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09') //** v1.1 (April 7th, 09'): //** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. //** 2) Fixes scroll animation not working in Opera. var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:500, scrollto: 0, scrollduration:600, fadeduration:[600, 400]}, controlHTML: '&lt;div class="scroll-button"&gt;&lt;/div&gt;', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:15, offsety:75}, //offset of control relative to right/ top of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.fadeOut() //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" &amp;&amp; jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop&gt;=this.setting.startline)? true : false if (this.state.shouldvisible &amp;&amp; !this.state.isvisible) { this.$control.fadeIn() this.state.isvisible=true } else if (this.state.shouldvisible==false &amp;&amp; this.state.isvisible) { this.$control.fadeOut() this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws &amp;&amp; document.compatMode=="CSS1Compat" &amp;&amp; window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('&lt;div id="topcontrol"&gt;'+mainobj.controlHTML+'&lt;/div&gt;') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', top:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, cursor:'pointer'}) .attr({title:'Scroll Up'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') .fadeOut() if (document.all &amp;&amp; !window.XMLHttpRequest &amp;&amp; mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </code></pre> <p>==================================================================================</p> <p>After adding display:none to the css for the $control inside the initfunction, the div doesnt appear at the start. However, it stops the slideshow from appearing properly. I am not sure why, completely stuck :-(</p> <pre><code>/* * A Slideshow Plugin for jQuery * By: Nathan Searles, http://nathansearles.com * Version: 1.1.9 */ (function($){ $.fn.slides = function( option ) { // override defaults with specified option option = $.extend( {}, $.fn.slides.option, option ); return this.each(function(){ // wrap slides in control container, make sure slides are block level $('.' + option.container, $(this)).children().wrapAll('&lt;div class="slide-control"/&gt;'); var elem = $(this), control = $('.slide-control',elem), total = control.children().size(), width = control.children().outerWidth(), height = control.children().outerHeight(), start = option.start - 1, effect = option.effect.indexOf(',') &lt; 0 ? option.effect : option.effect.replace(' ', '').split(',')[0], paginationEffect = option.effect.indexOf(',') &lt; 0 ? effect : option.effect.replace(' ', '').split(',')[1], next = 0, prev = 0, number = 0, current = 0, loaded, active, clicked, position, direction, imageParent, pauseTimeout, playInterval; // is there only one slide? if (total &lt; 2) { // Fade in .slide-container $('.' + option.container, $(this)).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ // let the script know everything is loaded loaded = true; // call the loaded funciton option.slidesLoaded(); }); // Hide the next/previous buttons $('.' + option.next + ', .' + option.prev).fadeOut(0); return false; } // animate slides function animate(direction, effect, clicked) { if (!active &amp;&amp; loaded) { active = true; // start of animation option.animationStart(current + 1); switch(direction) { case 'next': // change current slide to previous prev = current; // get next from current + 1 next = current + 1; // if last slide, set next to first slide next = total === next ? 0 : next; // set position of next slide to right of previous position = width*2; // distance to slide based on width of slides direction = -width*2; // store new current slide current = next; break; case 'prev': // change current slide to previous prev = current; // get next from current - 1 next = current - 1; // if first slide, set next to last slide next = next === -1 ? total-1 : next; // set position of next slide to left of previous position = 0; // distance to slide based on width of slides direction = 0; // store new current slide current = next; break; case 'pagination': // get next from pagination item clicked, convert to number next = parseInt(clicked,10); // get previous from pagination item with class of current prev = $('.' + option.paginationClass + ' li.'+ option.currentClass +' a', elem).attr('href').match('[^#/]+$'); // if next is greater then previous set position of next slide to right of previous if (next &gt; prev) { position = width*2; direction = -width*2; } else { // if next is less then previous set position of next slide to left of previous position = 0; direction = 0; } // store new current slide current = next; break; } // fade animation if (effect === 'fade') { // fade animation with crossfade if (option.crossfade) { // put hidden next above current control.children(':eq('+ next +')', elem).css({ zIndex: 10 // fade in next }).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ if (option.autoHeight) { // animate container to height of next control.animate({ height: control.children(':eq('+ next +')', elem).outerHeight() }, option.autoHeightSpeed, function(){ // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zIndex: 0 }); // reset z index control.children(':eq('+ next +')', elem).css({ zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); } else { // hide previous control.children(':eq('+ prev +')', elem).css({ display: 'none', zIndex: 0 }); // reset zindex control.children(':eq('+ next +')', elem).css({ zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; } }); } else { // fade animation with no crossfade control.children(':eq('+ prev +')', elem).fadeOut(option.fadeSpeed, option.fadeEasing, function(){ // animate to new height if (option.autoHeight) { control.animate({ // animate container to height of next height: control.children(':eq('+ next +')', elem).outerHeight() }, option.autoHeightSpeed, // fade in next slide function(){ control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing); }); } else { // if fixed height control.children(':eq('+ next +')', elem).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ // fix font rendering in ie, lame if($.browser.msie) { $(this).get(0).style.removeAttribute('filter'); } }); } // end of animation option.animationComplete(next + 1); active = false; }); } // slide animation } else { // move next slide to right of previous control.children(':eq('+ next +')').css({ left: position, display: 'block' }); // animate to new height if (option.autoHeight) { control.animate({ left: direction, height: control.children(':eq('+ next +')').outerHeight() },option.slideSpeed, option.slideEasing, function(){ control.css({ left: -width }); control.children(':eq('+ next +')').css({ left: width, zIndex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); // if fixed height } else { // animate control control.animate({ left: direction },option.slideSpeed, option.slideEasing, function(){ // after animation reset control position control.css({ left: -width }); // reset and show next control.children(':eq('+ next +')').css({ left: width, zIndex: 5 }); // reset previous slide control.children(':eq('+ prev +')').css({ left: width, display: 'none', zIndex: 0 }); // end of animation option.animationComplete(next + 1); active = false; }); } } // set current state for pagination if (option.pagination) { // remove current class from all $('.'+ option.paginationClass +' li.' + option.currentClass, elem).removeClass(option.currentClass); // add current class to next $('.' + option.paginationClass + ' li:eq('+ next +')', elem).addClass(option.currentClass); } } } // end animate function function stop() { // clear interval from stored id clearInterval(elem.data('interval')); } function pause() { if (option.pause) { // clear timeout and interval clearTimeout(elem.data('pause')); clearInterval(elem.data('interval')); // pause slide show for option.pause amount pauseTimeout = setTimeout(function() { // clear pause timeout clearTimeout(elem.data('pause')); // start play interval after pause playInterval = setInterval( function(){ animate("next", effect); },option.play); // store play interval elem.data('interval',playInterval); },option.pause); // store pause interval elem.data('pause',pauseTimeout); } else { // if no pause, just stop stop(); } } // 2 or more slides required if (total &lt; 2) { return; } // error corection for start slide if (start &lt; 0) { start = 0; } if (start &gt; total) { start = total - 1; } // change current based on start option number if (option.start) { current = start; } // randomizes slide order if (option.randomize) { control.randomize(); } // make sure overflow is hidden, width is set $('.' + option.container, elem).css({ overflow: 'hidden', // fix for ie position: 'relative' }); // set css for slides control.children().css({ position: 'absolute', top: 0, left: control.children().outerWidth(), zIndex: 0, display: 'none' }); // set css for control div control.css({ position: 'relative', // size of control 3 x slide width width: (width * 3), // set height to slide height height: height, // center control to slide left: -width }); // show slides $('.' + option.container, elem).css({ display: 'block' }); // if autoHeight true, get and set height of first slide if (option.autoHeight) { control.children().css({ height: 'auto' }); control.animate({ height: control.children(':eq('+ start +')').outerHeight() },option.autoHeightSpeed); } // checks if image is loaded if (option.preload &amp;&amp; control.find('img:eq(' + start + ')').length) { // adds preload image $('.' + option.container, elem).css({ background: 'url(' + option.preloadImage + ') no-repeat 50% 50%' }); // gets image src, with cache buster var img = control.find('img:eq(' + start + ')').attr('src') + '?' + (new Date()).getTime(); // check if the image has a parent if ($('img', elem).parent().attr('class') != 'slide-control') { // If image has parent, get tag name imageParent = control.children(':eq(0)')[0].tagName.toLowerCase(); } else { // Image doesn't have parent, use image tag name imageParent = control.find('img:eq(' + start + ')'); } // checks if image is loaded control.find('img:eq(' + start + ')').attr('src', img).load(function() { // once image is fully loaded, fade in control.find(imageParent + ':eq(' + start + ')').delay(500).fadeIn(option.fadeSpeed, option.fadeEasing, function(){ $(this).css({ zIndex: 5 }); // removes preload image $('.' + option.container, elem).css({ background: '' }); // let the script know everything is loaded loaded = true; // call the loaded funciton option.slidesLoaded(); }); }); } else { // if no preloader fade in start slide control.children(':eq(' + start + ')').fadeIn(option.fadeSpeed, option.fadeEasing, function(){ // let the script know everything is loaded loaded = true; // call the loaded funciton option.slidesLoaded(); }); } // click slide for next if (option.bigTarget) { // set cursor to pointer control.children().css({ cursor: 'pointer' }); // click handler control.children().click(function(){ // animate to next on slide click animate('next', effect); return false; }); } // pause on mouseover if (option.hoverPause &amp;&amp; option.play) { control.bind('mouseover',function(){ // on mouse over stop stop(); }); control.bind('mouseleave',function(){ // on mouse leave start pause timeout pause(); }); } // generate next/prev buttons if (option.generateNextPrev) { $('.' + option.container, elem).after('&lt;a href="#" class="'+ option.prev +'"&gt;Prev&lt;/a&gt;'); $('.' + option.prev, elem).after('&lt;a href="#" class="'+ option.next +'"&gt;Next&lt;/a&gt;'); } // next button $('.' + option.next ,elem).click(function(e){ e.preventDefault(); if (option.play) { pause(); } animate('next', effect); }); // previous button $('.' + option.prev, elem).click(function(e){ e.preventDefault(); if (option.play) { pause(); } animate('prev', effect); }); // generate pagination if (option.generatePagination) { // create unordered list if (option.prependPagination) { elem.prepend('&lt;div id="pagination"&gt;&lt;ul class='+ option.paginationClass +'&gt;&lt;/ul&gt;&lt;/div&gt;'); } else { elem.append('&lt;div id="pagination"&gt;&lt;ul class='+ option.paginationClass +'&gt;&lt;/ul&gt;&lt;/div&gt;'); } // for each slide create a list item and link control.children().each(function(){ $('.' + option.paginationClass, elem).append('&lt;li&gt;&lt;a href="#'+ number +'"&gt;'+ (number+1) +'&lt;/a&gt;&lt;/li&gt;'); number++; }); } else { // if pagination exists, add href w/ value of item number to links $('.' + option.paginationClass + ' li a', elem).each(function(){ $(this).attr('href', '#' + number); number++; }); } // add current class to start slide pagination $('.' + option.paginationClass + ' li:eq('+ start +')', elem).addClass(option.currentClass); // click handling $('.' + option.paginationClass + ' li a', elem ).click(function(){ // pause slideshow if (option.play) { pause(); } // get clicked, pass to animate function clicked = $(this).attr('href').match('[^#/]+$'); // if current slide equals clicked, don't do anything if (current != clicked) { animate('pagination', paginationEffect, clicked); } return false; }); // click handling $('a.link', elem).click(function(){ // pause slideshow if (option.play) { pause(); } // get clicked, pass to animate function clicked = $(this).attr('href').match('[^#/]+$') - 1; // if current slide equals clicked, don't do anything if (current != clicked) { animate('pagination', paginationEffect, clicked); } return false; }); if (option.play) { // set interval playInterval = setInterval(function() { animate('next', effect); }, option.play); // store interval id elem.data('interval',playInterval); } }); }; // default options $.fn.slides.option = { preload: true, // boolean, Set true to preload images in an image based slideshow preloadImage: '', // string, Name and location of loading image for preloader. Default is "images/loading.gif" container: 'slide-container', // string, Class name for slide container. Default is "slide-container" generateNextPrev: false, // boolean, Auto generate next/prev buttons next: 'next', // string, Class name for next button prev: 'prev', // string, Class name for previous button pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to generatePagination: true, // boolean, Auto generate pagination prependPagination: false, // boolean, prepend pagination paginationClass: 'pagination', // string, Class name for pagination currentClass: 'current', // string, Class name for current class fadeSpeed: 350, // number, Set the speed of the fading animation in milliseconds fadeEasing: '', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds slideEasing: 'easeInOutCubic', // string, must load jQuery's easing plugin before http://gsgd.co.uk/sandbox/jquery/easing/ start: 1, // number, Set the speed of the sliding animation in milliseconds effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for both crossfade: false, // boolean, Crossfade images in a image based slideshow randomize: false, // boolean, Set to true to randomize slides play: 0, // number, Autoplay slideshow, a positive number will set to true and be the time between slide animation in milliseconds pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds hoverPause: false, // boolean, Set to true and hovering over slideshow will pause it autoHeight: false, // boolean, Set to true to auto adjust height autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click animationStart: function(){}, // Function called at the start of animation animationComplete: function(){}, // Function called at the completion of animation slidesLoaded: function() {} // Function is called when slides is fully loaded }; // Randomize slide order on load $.fn.randomize = function(callback) { function randomizeOrder() { return(Math.round(Math.random())-0.5); } return($(this).each(function() { var $this = $(this); var $children = $this.children(); var childCount = $children.length; if (childCount &gt; 1) { $children.hide(); var indices = []; for (i=0;i&lt;childCount;i++) { indices[indices.length] = i; } indices = indices.sort(randomizeOrder); $.each(indices,function(j,k) { var $child = $children.eq(k); var $clone = $child.clone(true); $clone.show().appendTo($this); if (callback !== undefined) { callback($child, $clone); } $child.remove(); }); } })); }; })(jQuery); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPectus Excavatum
    1. USPectus Excavatum
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COJust set `display: none` on the style for the div. This way on the first load it will be hidden.
      singulars
      1. POscrolltop javascript button - how to hide div at page load
      1. USAleks G
    2. COif I use display:none - it actually stops the button from appearing all together and it effects some of the other elements of the site - stops the slideshow from displaying - no idea why - just added it to the css line of the initfunction, just after the pointer is set.
      singulars
      1. POscrolltop javascript button - how to hide div at page load
      1. USPectus Excavatum
    3. COI have used firebug and see that the fadin and fade out methods just set it to display:none or block. So clearly you are right, now I just need to figure out why on earth it stops other elements which are not parent/child elements from appearing
      singulars
      1. POscrolltop javascript button - how to hide div at page load
      1. USPectus Excavatum
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload