I'm struggling with a jquery problem.
I think I am close to a solution but I keep stumbling at the moment.
So my markup (simplyfied) looks like this:
<div class="col">
Content
<div class="scroll-container">
<ul>
<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
scroll down
</div>
Basically a .col that holds a container and a button.
The Plan:
1) After a click on the button container should scroll down to the next <li>.
2) When the last <li> is reached it scrolls to the first <li> again. So I need a loop.
3) The numbers and size of <li> may change from case to case. So basically the button should just scroll the next <li> to the top of the container.
4) The scrolled <li> needs to have a little margin to the top edge of the container.
Where I am:
I had a similar problem which got brilliantly solved by ronalchn and since the problem is somewhat similar I have created a fiddle based with his code.
Fiddle with the solved problem (To see the code in action)
Fiddle with the this problem (Obviously doesn't work with the same jquery)
I think the code basically only needs a little rearranging to work with the new situation.
I have tried for a couple of hours but it seems like this is still beyond my current level of understanding jquery.
I am very greatfull for any push in the right direction. Thank you.
Here you go: http://jsfiddle.net/UQsv9/7/
CSS changes: added position: relative to your ul
I'm using $.fn.data to store the current child, from there it's just using the difference between the two offsets to calculate the new top.
Related
I have a basic show hide toggle. It works on everything but iPhone and it's driving me crazy.
Is there an alternative to the following javascript that does not use the toggle function?
Javascript
$(document).ready(function(){
$(".pic_you_click_on").on('click', function(){
$("#display").toggle();
});
});
HTML
<img class="pic_you_click_on" src="images.png"></img>
<ul id="display" class="div_to_appear">
<li>About</li>
<li>Home </li>
</ul>
CSS
#display {
display:none;
}
Okay so I know what the problem is.
Animate Css. I used it to apply an animation effect to my header that flies in. What I did not know, it that using animations can often mess with your stacking order, particularly fixed elements. See article below.
http://daneden.me/2012/04/22/css-transforms-and-z-index/
I had to strip back the whole site and place each element one by one, checking it each time.
The moment I added the effect, it turned to custard. Apparently this is common knowledge... Not to me! I've removed it and the button now functions.
I'm quite new to this all so sorry for my lack of terminology.
I was looking at this site and I was wondering how I do the content/page change without reloading the page.
Could someone point me in the right direction? What is that JavaScript? CSS transitions? jQuery? Or could you show me some code? Any help would be amazing; I've been looking around for a while can't find anything like it...
That's a simple slider, just instead of slide images, it slide content (nested divs, img, lists). I checked the code for you and is using this jQuery plugin: SudoSlider plugin
Do not reinvent the wheel by writing your own plugin, you can see few demos here, but this one is very close to the example using auto height. This is how you can use it on your site:
Jquery
<script type="text/javascript" >
$(document).ready(function(){
var sudoSlider = $("#slider").sudoSlider();
});
</script>
HTML
<div id="slider" >
<ul>
<li><div> .... </div></li>
<li>Lorem ipsum text + image</li>
<li>List, maps, ...</li>
</ul>
</div>
It's JQuery animation. It's a (very slick, but still) typical carousel effect, where you have a slider div that extends beyond the visible screen, and its left margin is animated to create the effect.
It's straightforward to create the basic effect (but of course a lot of work to create something that looks as good as the link):
Set overflow-x: hidden to a container div
Add a slider div inside the container, and slide elements within the slider
Add navigation buttons, and on click animate the slider's left offset (keeping track of the current position)
Here's a really basic example.
I could say that it's possible to use all of the mentioned options :)
Basically you can use something like http://bxslider.com/ to achieve what you want just instead using of img elements inside list items use some content items.
I have an issue with scrollspy, recreated in this fiddle:
http://jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy() via JavaScript to activate the plugin.
The next step would be to remove the fixed content height and use 'affix' on the sidebar.
I had the exact same problem and for me, adding height: 100% to the body element was the fix.
(stricly nothing else seemed to make it work)
You need to attach the ScrollSpy to the element that is going to trigger scroll events, rather than the menu that is going to reflect the scroll position:
$('#content').scrollspy();
JSFiddle
FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
(It just auto-selected the my last element always)
In my case, Firefox was always selecting the last element and it was NOT the
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
It was a
position:absolute;
on a container div.
Hope it helps someone out there...
I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
https://github.com/twbs/bootstrap/issues/5007
When calling the scrollspy method you typically specify the body tag and the nav element.
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.
If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html> to the first line of your page. This was a simple step which solved the problem for me.
I had this same problem; removing the height: 100% from the <body> element fixed this for me.
I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
, $element = $(element).is('body') ? $(window) : $(element)
to this:
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
(note that the element after the // is a comment so I don't forget I changed it)
And that fixed it for me.
ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
Nested content was my problem. This fixed it for me:
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(2) If the items in your spied upon content container are nested then it won't work...
This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.
Make sure you're not mixing implementations. You don't need $('#content).scrollspy() if you have data-spy="scroll" data-target=".bs-docs-sidebar" on your body tag.
I think that this might be a bug in ScrollSpy.
I also had the same problem and when I stepped through the code I could see that the offset for all the targets were the same (-95px). I checked where these were being set and it was using the position() function. This returns the position of the element relative to the offset of the parent.
I changed this to use the offset() function instead. This function returns the position of the element relative to the offset of the page. Once I did this then it worked perfectly. Not sure why this isn't the default behaviour.
The reason that the position() function wasn't working in my case was because I had to have an empty div which was actually absolutely positioned 95px above the top of its container. I needed this as my target so that the headings weren't hidden behind my header that was fixed to the top of the page.
When I was trying to figure out this issue, I used some of what Mehdi Benadda said and added position: relative; to the body. I added this to the stylesheet:
body {
position: relative;
height: 100%;
}
Hopefully this helps someone in the future.
You don't have to call method scrollspy().
Also you don't need set height: 100% anywhere.
All you need is:
position: relative; for body
add data-bs-spy="scroll" to your content or body
add data-bs-target with navbar id
https://i.imgur.com/M5jib0t.png
It helps me.
It seems that scroll spy work only when used container has a scrollbar (Tested with bootstrap 5).
You can put data-bs-spy="scroll" and data-bs-target="#target-nav" attributes in the nearest parent having a scrollbar.
In my case, i had added the scrollspy component of bootstrap version 5.2.3 but my bootstrap js cdn was 5.0. After i added the 5.2.3 js cdn, it worked!
You may also add the downladed bootstrap js files as well.
And make sure to add the bootstrap css cdn too!
I like an effect that I have seen on a web site and I have been paintstakingly sifting through their javascript and CSS to see how its done. However, the site is Korean and to make it more difficult, I am not too well versed in javascript to begin with.
The site is:
http://search.naver.com/search.naver?where=nexearch&query=idolfix&sm=top_hty&fbm=1&ie=utf8
Has anyone ever seen the effect on the top right of the page where the page is updating the 10 links every few seconds - specifically the way the text scrolls in place?
They have a wrapper div that has overflow: hidden.
Then inside that div they have 2 divs with the current and the next value.
<div class="wrap">
<div class="current">
foo
</div>
<div class="next">
bar
</div>
</div>
After the effect you just have to make the .next the .current one, and add a new .next value with AJAX.
At first, the .next div is outside the .wrapper (underneath actually), then they move it up.
The effect could easily be done with jQuery moving the two divs at the same time.
$('.current').animate({
'top': '-1em'
});
$('.next').animate({
'top': 0
});
Here's a live example: http://jsfiddle.net/tusbar/GFZTE/
I have a Div Container which holds 4 <li>
What I am doing is prepend a <li> into the <ul> and remove the last <li>
I did that quite easily using
$('#news-ul li:last').remove()
$('#news-ul').prepend(str); //str contains a <li>
I want to have scroll effect when the <li> is prepending. How to achieve this?
I'm not sure I'm getting you right, but if I am, I'd first create a new element:
var newEle = $(str);
Then prepend it, hide and animate
$('#news-ul').prepend(newEle);
$(newEle).hide().slideDown();
Hope this helps.
Edit, more code:
Take a look at http://api.jquery.com/category/effects/ If I were to recreate the twitter effect it would probably be:
$('#news-ul').prepend(newEle);
$(newEle).fadeTo(0,0.01,function(){
$(this).hide().slideDown('normal',function(){
$(this).fadeIn();
});
});
A quick description, first we add the element as before, then fade it out to 1% opacity in 0 seconds (at 0 opacity it has no height), then, when we know its faded, we issue a callback, hiding the element completely, issue the slidedown with a normal speed, when done sliding, we issue another callback fading it in.
Warning: The above code is untested, use at your own risk ^^
You can take a look at
jQuery.ScrollTo plugin