I'm trying to use nicescroll on my website and it's working everywhere except on one page where I have a hidden div. Basically, I have a link that when clicked displays some content that was hidden on the page before. The problem - after clicking the link and showing the content it overflows and is not visible and not scrollable. Nicescroll isn't working for some reason.
Both work on their own on the page - meaning - if I take out the nicescroll code and keep the show/hide div code then I can click on the link and the page will become longer and a regular scroll bar will appear and I can scroll down to the bottom of the content.
Conversely, if I take out the show/hide code (just making the content shown at the load of the page) and leave in the nicescroll code then the page will load as a long page and the nicescroll bar will show up and work just fine.
I just can't get them to work together. I assume it has something to do with the page not needing to be scrollable when it first loads and when nicescroll is originally called so it just says "I don't need to work for this page" and then gives up. So, I've tried copying what looks to me like the "nicescroll startup code"
<script>
$(document).ready(function() {
$("#right").niceScroll();
});
</script>
into the function that is called when the show/hide link is clicked hoping that would "restart" it but that didn't work either.
The show/hide functions looks like this:
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
with the actual div section of the page looking like this:
-Show Stuff
<div id="example" class="more">
<p>
"Stuff here"
</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">-Hide Stuff-</a></p>
</div>
Everything is wrapped in a div with id="right" which is why the nicescroll script applies it to #right (which, again, works fine when I don't have the show/hide functionality.)
Any ideas?
I don't know what it is the correct solution but works fine after my div shows up and I call method:
$("#myHiddenDiv").getNiceScroll().onResize();
First off all move the inline onclick to the docready. If nicescroll is attached to the #right container you can try the following:
// cache container:
var $right = $('#right');
// use .on() jquery on container:
$right.on('click', '.showLink', function(e){
e.preventDefault()
$right.find('#example').show();
// resize nicescroll
$right.getNiceScroll().show().resize();
}).on('click', '.hideLink',function(e){
e.preventDefault();
$right.find('#example').hide();
// also hide nicescroll:
$right.getNiceScroll.hide();
});
Related
I am new to Javascript and HTML, so please help me. My problem is next (you can watch it when loading my site https://treasure-island.fun). So if u don't see the problem, I will explain: when you load the page you can see the blinking of all "donations" menus. In my JS code I have onLoad() function which hides all of the menus except one. But how can I make it stop blinking and flashing? Ty gyus.
This is the script that hides all
<script>
function hide_all(id_not_to_hide){
document.querySelectorAll('.donation').forEach(function(el) {
el.style.visibility = 'hidden';
});
document.querySelectorAll(id_not_to_hide).forEach(function(el) {
el.style.visibility = 'visible';
});
}
</script>
and this is my onload in tag:
<body onload="hide_all('#topographic-donation')">
Right now what you have is: your default state is that all .donation elements are visible. When the page is loaded, you hide all of them except one.
Just make the elements invisible by default and on body load, make that one single element visible.
I've been searching a lot for the solution to this and can't figure it out. Tried a lot of methods I've seen but none seen to work.
Here is what I wanna do:
I have a main page with a navigation menu on its side, and all the content is loaded on iFrame. I wan't to know when the iFrame content was scrolled down to enable or disable Back to Top Button and also send the iFrame content back to top when clicking the button.
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
I've found this code but it is made to work on the current page you're on. I've tried a lot with document.parent, parent, trigger(), but nothing seen to work. I could paste this code on all pages that will load on the iFrame but what I want is to place the back to top button on a static button menu that I have on the top of the content so it can be seen from wherever part of the text you are.
Thanks!
Have you tried inserting this script in the iframe head? btw its parent.document not document.parent.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
button = document.getElementById('topButton');
button.style.display = "block";
}
});
function toTop(){
document.getElementById('iframeContainer').scrollTop = 0;
}
and just hide the button. once the bottom is reached it should change the style to block and make it visible. Call the toTop() function with your newly visible button.
I am kind of really stuck with this problem. Any help will great.
I am clicking on a link which expand the content and when i am cliking on a hide button, instead of taking me to the Expand link, it takes me to the bottom.I have already tried such options like onclick="fun() return false" and href=javascrpit:void(0), but not could help.
PLease refer http://jsfiddle.net/BdsyJ/ this link and click on "How do I maximize battery life" and at the bottom you will get a hide button which should take the control back to the Click it rather than placing the page at the bottom.
Thank you guys.
I changed your ReverseDisplay() method to this and it works nicely:
function ReverseDisplay(d) {
$("#" + d).toggle();
$('html, body').animate({
scrollTop: $("#" + d).prev().offset().top
}, 100);
}
here's a working example:
http://jsfiddle.net/hunter/BdsyJ/5/
In case you were wondering; YES your HTML is invalid. <li> elements should not have <div> siblings.
You're at the bottom of the page because you have hidden so much content. Two things I would update in your code:
cache the element look up so you only do it once and and
scroll the page to the top after you close it using scrollTo(0,0) or
something more complex if you need to scroll back to the exact
element you toggled.
Code:
function ReverseDisplay(d) {
var el = document.getElementById(d);
el.style.display = (el.style.display == "none")?"block":"none";
}
Whenever the url contains the div id, it would obviously go down to the div when the URL has:
http://domain.com.faq.php#1
<div id="1">Bla bla bla</div>
But what I like is to have same feature of Stackoverflow, when you click on an answer in your messages, it will scroll down to the page and has that fadeOut effect on the answer.
How do I do this?
Animation to a valid anchor destination cannot be animated on page load that I know of since the browsers will default to scrolling the user down the page to the anchor. For in-page links, you can hijack the anchor links and animate.
However, on new page loads like on SO, you will notice the page does not animate down, but just scrolls down, though the box does animate a color. This is how you could do it in jQuery. Be sure to include the color plugin if you want to animate background-colors.
<script src="js/jquery.color.js"> </script>
<script type="text/javascript">
$(window).load(function(){
var hash = window.location.hash;
if(hash){
$(hash).css('backgroundColor', '#AA0000')
.animate({backgroundColor: '#FFFFFF'}, 200);
}
});
</script>
You can use DOMReady instead of load, but it might try to run your animation too soon, and the user will miss it.
If you only wanted to animate div's with a specific class, you can add a filter to your find:
$(hash).filter('.my_div').css ...
Use:
event.preventDefault();
For example:
$('li.share a').click(function(ev) {
ev.preventDefault();
var link = ev.target.href;
var id = link.substring(link.indexOf("#") + 1);
$('#' + id).fadeOut();
});
StackOverflow uses anchors as well. The post you're currently reading is:
HTML and jQuery anchoring
It's simply <a name="anchorName"></a>
at the address bar: [urlToPage]#anchorName
Now, to get the fade effect [in pure JS w/o frameworks]
Set the div.style.opacity = 0;
var intervalId = setInterval( function(){
if( (div.style.opacity+= 0.1) >= 1) clearInterval(intervalId);
}, millisecondInterval);
The clearInterval part isn't necessary, since once opacity goes above 1, browser won't render differently [although the number keeps adding...]
I have a gridview and when i mouse hover on a particular column, i am loading an external div(position:absolute) into that position.This i have done by calling a js function in the onmouseover event of the gridview cell(gvTestGrid.cells[1].attributes.add("onmouseover","loadDIV();")).
I am able to load the div properly on mouse hover, but the problem is my loaded div contains a dropdown and button inside it. when i try to move my mouse inside the div to click the button or select the dropdown list, the div moves away.This happens after i added
onmouseout event(gvTestGrid.cells[1].attributes.add("onmouseout","removeDIV();"))
without onmouse out event my div will remain loaded there on the gridview cell.Please help
i have done a small sample
<html>
<div id="divPopup" onmouseout="removeDIV(this,event);" style="display:none;width:100px;height:100px;color:Navy;border:2px;border-color:Red;border-style:solid;">
Yes its me
</div>
<table>
<tr><td>A</td></tr>
<tr><td>S</td></tr>
<tr><td onmouseover="loadDIV(event)" onmouseout="removeDIV(this,event);">D</td></tr>
<tr><td>E</td></tr>
</table>
</html>
<script language="javascript" type="text/javascript">
function loadDIV(evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.position='absolute';
myWin.style.left = evt.x;
myWin.style.top = evt.y;
myWin.style.display='block';
}
function removeDIV(obj,evt)
{
var myWin = document.getElementById('divPopup');
myWin.style.display='none';
myWin.style.left = 0;
myWin.style.top = 0;
}
</script>
if you try to enter mouse into the div it will move away.Any solution for this please??
How about removing the div after you are done with the work in the DIV you have popped up? So you would close the DIV when you click the button in the DIV (Assuming it does work and should close afterward) or in a similar manner.
Set a small timeout for hiding the div and clear this timeout in the onmouseover handler for the div.
It seems like the onmouseout event should be attached to the div.
If you don't have Anchor tags in this content, may I suggest some CSS magic?
CSS here
a.MyCellPopup div.MyPopup {display:none;}
a.MycellPopup {position:relative;} /* Make pop up's position relative to the anchor tag */
a:hover.MyCellPopup div.MyPopup {display:block;position:absolute;top:10px;left:10px}
HTML Here
<a href="#" onclick="return false;" class="MyCellPopup">
<div class="MyPopup">POP UP STUFF without links (links won't work)</div>
</a>
I have an onclick="return false" so if they click on the cell, they won't be brought to the top of the page. The href needs to be in there or else IE won't recognize the hover. I got this idea from ZenGarden for how to do simple pop ups.
If this still doesn't work I highly recommend visiting the YUI library, they have a javascript widget for exactly this problem.