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/
Related
I was wondering, for all you javascript and jquery guru's what would be my best way to tackle this problem. What I have is a navigation that is hidden via CSS to the bottom of the screen. I've managed to have it working as a toggle fine - which you can see here http://jsfiddle.net/olichalmers/Lby7vfdf/.
var body = $("body"); $("#menuBtn").click(function() {
body.toggleClass("showMenu");});
This obviously means that the menu slides up and down.
What my problem is is that I want to animate the menu up on the initial click, and then when you click the button again to close it I want the navigation window to slide up. Then when you click it again to open it, it is appearing from the bottom again. I've been trying to get my head around how this would work and what I think is that it would be two classes (one for hide menu, and one for show menu) which would be added and removed from the body. I have a jsfiddle here http://jsfiddle.net/olichalmers/twqd2yj0/
var body = $("body"); $("#menuBtn").click(function() {
if (body.hasClass("hideMenu")) {
body.removeClass("hideMenu").addClass("showMenu");
}
else if (body.hasClass("showMenu")) {
body.removeClass("showMenu").addClass("hideMenu");
}});
This is probably shocking in it's attempt to come to a solution to this problem. I'm using jquery but maybe it is a javascript solution using an event listener that is needed here? My jquery and javascript knowledge is patchy at best as i'm still in the midst of learning so please go easy if I appear very dumb!
Hope i've been clear enough. Thanks.
May I suggest a different approach?
Create your bottom menu in a separate DIV, located at very top of your HTML (directly under BODY tag). Make that DIV position: fixed -- that takes it out of the "flow" and positions it relative ot the viewport (the screen), not to any other divs or to the web page itself. Now, you can move it up/down based on some trigger.
Here is a code example:
jsFiddle Demo
HTML:
<div id="botttrig"></div>
<div id="bottmenu">The menu is here</div>
<div id="wrap">
<div id="content">
<p>Content goes here</p>
<p>Hover over small box at bottom left</p>
</div>
</div>
jQuery:
$('#botttrig').hover(
function(){
$(this).fadeOut();
$('#bottmenu').animate({
'bottom': '0px'
},500);
},
function(){
//do nothing on hover out
}
);
$('#bottmenu').hover(
function(){
//do nothing on hover in
},
function(){
$('#bottmenu').animate({
'bottom': '-80px'
},500);
$('#botttrig').fadeIn();
}
);
See this jsFiddle for another example. I removed the trigger box, and left the top 10px of the menu visible at screen bottom. Upon hover, slide the menu up. You may wish to increase the z-index on the #bottmenu div to always display it above the other DIVs on the page, so that it is always visible.
http://jsfiddle.net/twqd2yj0/4/
I've used slideToggle() and added display:none; to #navHold
I have a Div in which there is a lot of other elements like (for ease of understanding using inline-styles)
<div id="MainItemList" style="width:300px; height:50px;">
<h4>This is a long content div</h4>
<ul> <-- A Long List of Li --> </ul>
<p>Click on an list item</p>
<other divs>...
</div>
And then there is a dynamic series of other divs and I want to make my MainItemList div to be positioned just below any div I click. Like
<div id="DynamicDivs">
<div id="Dyn1"></div>
<div id="Dyn2"></div>
<div id="Dyn3"></div>
<div id="Dyn4"></div> //And so one
</div>
So, now when I click on Dyn1 then my MainItemList div should be placed below Dyn1 div. I tried it with Jquery something like
var MainListDiv = '<div id="MinItemList"'>...A lot of Elements..</div>;
$(document).on('click','#DynamicDivs div', function()
{
$(this).append(MainListDiv);
});
$(document).on('onmouseout','#DynamicDivs div', function()
{
//Check and remove
$('#MainListDiv').remove();
});
but in this way everytime a user clicks on such a div, a long code is ran to append a lot of stuff into it and remove it when user moves out. On PCs it isn't a big issue but on mobile devices it gets to much slow and that is making everything worse and worse.
What can be the trick to do so? I have made my above code running for 1 month and now it is being a headache when user complains.
Actually there is a list of some kind of pictures and icons on which user clicks then that item is appended to dynamic div and MainListItem must has to be just below Dynamic div so user click and be removed when onmouseout from that.
In my JQuery code everytime div is created and removed. MainItemList div is created on page load and is permanent (created once on page load but hidden) so it just has to be become visible and moved under any div user click and hide when mouseout? And one more thing which is making matter even worse is that when page scrolls, moves Dynamic Divs that's important :(
As you know, unhiding #MainListItem and giving it a fixed position next to the hovered-over div should do the trick, paying care to provide a correct 'top' value. The complicated part is figuring what a correct 'top' value would be. Using your example alone, that would be: the dynamic-div's top + the dynamic-div's height + any margins/other-spacing above.
Here's the code to make it happen (I included a basic fade so it's a little more seamless):
var marginOffset = 0;
$(document).ready(function(){
marginOffset = $('#DynamicDivs').offset().top;
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'fixed', top: $(this).position().top + $(this).height() + marginOffset}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
I have NOT tested this across multiple mobile devices, so do your due testing please. However, this method should be significantly less taxing on mobile devices than the appending html method.
Furthermore, this only handles the pop-up with scrolling. If you wish to have the pop-up list be delayed before it disappears, or if you have some complex margins, you'll have to revise the code accordingly.
JS Fiddle example: http://jsfiddle.net/wXKfv/10/
EDIT:
After further discussion in the comments, here is the Javascript that solves the specific problem:
$(document).ready(function(){
$('#DynamicDivs div').mouseover(function(){
$('#MainItemList').css({ position: 'absolute', top: $(this).position().top + $(this).height()}).stop(false, true).fadeIn('fast');
}).mouseleave(function(){
$('#MainItemList').stop(false, true).css({ display: 'none', position: 'static' });
});
});
JS Fiddle example: http://jsfiddle.net/wXKfv/11/
Your approach is wrong. Put the MainItemList and DynamicDivs in to separate divs. Instead if appending to the existing div try replacing the MainListDiv. or put an .empty() before append()
-or-
Assuming you are loading the MainListDiv via ajax:
load the MainListDiv on to the body and hide it.
on click event for "DynamicDivs div" position the div with jquery and css under the DynamicDivs
Making a web app similar to instragrams layout and the post items have a full width image and then a div heading above each once.
e.g.
<div class="blogpost">
<div class="blogtitle">
</div>
<div class="blogimage">
</div>
</div>
This is a simple list of the posts with the title above. On instragram, once the title hits the tops of the page (because of user scroll) that title div is fixed. Once the user scrolls more and the next title div meets the bottom of the current fixed once, the current one is pushed up and the new one fixed to the stop.
Any help on this?
You are looking to create a site that uses parallax scrolling. Here is a link to a helpful site.
Make a variable with a value of zero, and check (in JQuery) $('.blogtitle').eq('variableWithZero')offset().scrollTop() and if it's zero, change its position to fixed, and add one to the variable with zero. Before that, remove() (.blogTitle).eq('numberWithZero - 1)
This will only help with scrolling up, but it should get you started ;)
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
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.