So I'm writing a simple page that I want to be able to slide some content down when a button is clicked. Unfortunately this also causes some issues with the button I have underneath the sliding content. When I click the first button to slide content down, it works fine. As soon as I click the 2nd button, it slides the first content up, and the 2nd down and causes some jumping with the button below.
$('#1G').live('click', function(){
$('#slv').slideUp('slow');
$('#gld').slideUp('slow');
$('#brz').slideToggle('slow');
});
$('#2G').live('click', function(){
$('#brz').slideUp('slow');
$('#gld').slideUp('slow');
$('#slv').slideToggle('slow');
});
$('#3G').live('click', function(){
$('#brz').slideUp('slow');
$('#slv').slideUp('slow');
$('#gld').slideToggle('slow');
});
This happens on what seems to be every animation of size.
Here's an example:
http://kod.singaming.net/hosting
I've tried adding a width on #brz #slv and #gld, and I've tried adding a height to each.
Is it some css property I have to set? Let me know if I need to explain anything else.
This new method uses one box called info into which the correct content is loaded using the .load() function.
alternative html:
<div id="info" class='pkg'></div>
<div id="button" class="clearfix">
alternative script:
$('#1G').live('click', function(){
if ($("#info").hasClass("1")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/bronze.html')
}).slideToggle('slow').addClass("1");
});
$('#2G').live('click', function(){
if ($("#info").hasClass("2")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/silver.html')
}).slideToggle('slow').addClass("2");
});
$('#3G').live('click', function(){
if ($("#info").hasClass("3")) return false;
$('#info').removeClass("1 2 3").slideUp('slow', function() {
$(this).load('_packages/gold.html')
}).slideToggle('slow').addClass("3");
});
css for style.css:
#info {
display: none;
overflow: hidden;
height: 120px;
}
some other script that changes:
$('#brz').load('_packages/bronze.html');
$('#slv').load('_packages/silver.html');
$('#gld').load('_packages/gold.html');
The above can all just go away.
EDIT
I added the code I mentioned in my comment to prevent the buttons from functioning if the click is on the currently selected item. It's probably not the most elegant solution but it works. I add the class 1, 2, or 3 depending on the item clicked, and remove all of them upon a click of a different one.
The issue here is that the 3 divs #brz, #slv, and #gld are not wrapped in a div that will prevent the button below from moving because it is always the same height regardless of the movement of the content inside of it.
try:
<div style="[some height]">
// your three content divs
<div id="brz"></div>
<div id="slv"></div>
<div id="gld"></div>
</div>
the [some height] should be equal to whatever height you need it to be so that it will not be affected by the changes of the content inside the div.
Related
I've seen answers on here on how to do this, but I just can't get it to work. Maybe another set of eyes will help. I'm trying to get the scrollbar to appear in a div that popups when an image is clicked. Here's the code for that:
('modalcs' is the name of the div that pops up)
And the function:
function update_scroll(theID)
{
document.getElementById(theID).style.display = 'block';
$(".scrollable").mCustomScrollbar("update");
}
In my $(document).ready(function() I have:
$(".scrollable").mCustomScrollbar({
theme:"dark-thick",
scrollButtons:{
enable:true,
advanced:{
updateOnBrowserResize:true,
updateOnContentResize:true
}
}
});
and I understand that on page load since the hidden div isn't seen, the scrollbar is unable to see its content.
TIA for any help!
The problem is that the "update" command does not operate on a collection, so if $(".scrollable") returns more than one element, it will update only the first one. Use $.each
$(".scrollable").each(function(){
$(this).mCustomScrollbar("update");
});
On the other hand, since you are operating on 1 element, you can just change your function:
function update_scroll(theID)
{
$('#' + theID).show().mCustomScrollbar("update");
}
i have 2 divs which toggles in every 3 seconds. now for the text in the div i am using an extension called sliding letters, as you can see in the demo available here. http://tympanus.net/Development/SlidingLetters/
The problem is, it works alone but now with toggle.
i have my working version located here http://webmaster.lk/n/
as you can see it is not showing the text "IMAGE 2" unless u hover it once.
can anybody please help me resolve this ?
i have the same created as a fiddle here, http://jsfiddle.net/KuW6K/5/
without hoverwords() - http://jsfiddle.net/KuW6K/4/ this is working correctly.
<body style="background:#cdcdcd;">
<div class="sl_examples">
<!-- need to show one of the links below every 3 seconds-->
image4
image2
</div>
</body>
Update
sample demo of the letter sliding extension - http://tympanus.net/Development/SlidingLetters/
Update 2
i removed the toggle() and re wrote it this was as in the answer 1 it was mentioned as toggle() is depreciated. but still no good.
$(document).ready(function() {
setInterval(function(){
if($("#example1").is(":visible"))
$("#example1").hide();
else
$("#example1").show();
if($("#example2").is(":visible"))
$("#example2").hide();
else
$("#example2").show();
},3000);
});
Update 3
I have attached the source here for reference, https://www.mediafire.com/?fi8547rhm1q8ixt
Update 4
actually it should only work when mouse enters and mouse leave. but here the problem is, (check this) http://webmaster.lk/n/ first it shows IMAGE 4 (red background) and when you hover it IMAGE 3 appears (light blue letters) then afer 3 seconds, Green color plain background appears without the text IMAGE 2. this is the problem why it is not working as IMAGE 4 works.
Your initial issue was caused because you were setting #example1 to display none;
#example1 {
background: green;
display: none;
}
And then you were calling
$('#example1').hoverwords();
This was causing the blank background.
So just remove the display:none; css and call hoverwords on example1 before it's hidden.
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
And then hide it after using jQuery.
It looks like you have a simillar working solution in your Update 4
http://jsfiddle.net/trevordowdle/KuW6K/15/
While it works well you can still trigger the error. This happens when hovering back and forth and the setInterval triggers at the same time. The toggle from the trigger and the hoverwords function if ran at near the same time interfere with each other and you don't get the desired result.
One option is to stop the words from changing while they are being hovered.
Like:
jQuery
var hover = false;
setInterval(function () {
if(!hover){
$('#example1').toggle();
$('#example2').toggle();
}
}, 3000);
$('#example1').hoverwords();
$('#example2').hoverwords();
$('#example1').hide();
$('.sl_examples').hover(function(){
hover = true;
},function(){
hover = false;
});
CSS
#example1 {
background: green;
}
http://jsfiddle.net/trevordowdle/KuW6K/14/
And if you would would rather have it reset the timer.. Meaning that once your done hovering the 3 second timer starts from 0. Here is another example:
http://jsfiddle.net/trevordowdle/KuW6K/16/
.toggle() is deprecated
http://api.jquery.com/toggle-event/
Check here for an equivalent
Equivalent of deprecated jQuery Toggle Event
UPDATE
So the real issue here is the way that the Sliding Letters library binds the event which triggers itself. This is the line doing the binding:
$el.bind('mouseenter.hoverwords mouseleave.hoverwords', function(e) {
aux.toggleChars($el, settings);
});
As you can see it is only bound to fire on mouseenter and mouseleave. Since you want this to trigger on an interval you need to alter the existing or create a new binding.
I have a navigation bar at the top of my eform that skips to the next and previous div (page/section) but only if that div is visible. The divs are hidden unless activated with a checkbox. so the next button on the nav bar needs to work by always taking you to the next available div.
The following code works for the first button but these nav bars display at the top of each section so the next section has a next button on it running the same function (which doesn't work) i'm struggling to exlpain myself here so please shout if i'm not making sense. Here's my code.
function showNext(){
var pages = [document.getElementById("page2"),document.getElementById("page3")];
var next = ["page2marker","page3marker"];
for (var i=0; i<pages.length; i++){
if(pages[i].style.display == "block"){
window.location.hash = next[i];
}
}
}
Can i amend this function so that it will work for all buttons. I.e by always navigating to the next available div that is visible? I think i've probably missed a trick and a whole load of info but see what you think, any ideas?
Many thanks
You can achieve this using jQuery with the jQuery.next function - http://api.jquery.com/next/.
For a set of html like this:
<nav><a class="showNext">Show Next</a></nav>
<div class="content" style="display:none">I'm hidden</div>
<div class="content">I'm Visible</div>
You could use something like:
$('.showNext').bind('click', function(e) {
e.stopPropagation();
e.preventDefault();
window.location.hash = $(this).next('.content:visible').attr('id') + 'marker';
});
So im basically using a link, to scroll through a series of divs to select the correct one.
Ie click on happy, and scrolls to 'happy' div,
However, the scroll seems to not go to what its linked to, but scrolls to the third div in the list.
Heres the code:
<div id="portfoliowrapper">
<div class="title">My Portfolio</div>
<div class="row1"><a id="kazookilink" href="#">Kazooki</a></div>
<div class="row1"><a id="uodlink" href="#">Universe of Downhill</a></div>
<div class="row1"><a id="kudialink" href="#">Kudia</a></div>
</div>
<div id="description">
<div id="top">description</div>
<div id="kazooki">kazooki</div>
<div id="uod">Universe of Downhill</div>
<div id="kudia">kudia</div>
</div>
<script type="text/jscript">
function goToByScroll(id){
id = id.replace("link", "");
$("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
};
$(".row1 > a").click(function(e) {
// Call the scroll function
goToByScroll($(this).attr("id"));
});
</script>
Need to use position() instead of offset() and also need to set the #description to be position:relative.
Then you need to factor in the current scrollTop.
Last you need to cancel the default click behavior.
Complete example at http://www.jsfiddle.net/gaby/TneA6/
It's probably just scrolling to the very bottom of the page -- it can't align the top of the div with the top of the page because the page ends. Try adding a bunch of empty space at the bottom of the page (a <div style='height: 1000px;"></div> or something) and see if it still results in the unexpected behavior.
I guess you need to prevent the usual behaviour of the click:
$(".row1 > a").click(function(e) {
// prevent default behaviour
e.preventDefault();
// Call the scroll function
goToByScroll($(this).attr("id"));
});
Just guessing though.
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.