I am trying to figure out how to smoothly navigate between divs using jquery. I have a php website with 4 navigation divs. So when I click "staff" on the page I navigate to that div. How would I do this using jquery ?
This is how I´m using this:
<div id="top_links">
<p class="top_link">The Firm</p>
</div>
i´m trying to make it look like this website: http://themetrust.com/demos/solo/#services
I´m new to jquery. I cant see how I should do this so any suggestion would be a HUGE help.. Thanks :D
You can animate the scrollTop property with jQuery:
$('a').on('click', function (event) {
//stop the browser from jumping to the anchor
event.preventDefault();
//get the href for this link and the offset from the top of the page for the target of that href
var href = $(this).attr('href'),
oset = $(href).offset().top;
//animate the scroll to the selected element
$('html, body').stop().animate({
scrollTop : oset
}, 1000, function () {
//after the animation is complete, update the hash in the address bar so that the state is saved (if the user refreshed the page they can be brought back to this place, but that takes a bit more code)
location.hash = href;
});
});
Here is a demo: http://jsfiddle.net/Hpegt/1/
This requires that your links are targeting elements on the page using the syntax: #element-id.
Note that .on() is new in jQuery 1.7 and is the same in this case as .bind().
UPDATE
One cool thing that you can do with this is add a custom easing method. If you use the jQuery Easing Plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) then you can choose from lots of types of easing. I like easeInOutExpo for animating page scrolling.
You can use the scrollTo plugin: http://demos.flesler.com/jquery/scrollTo/
The example page is using jQuery.ScrollTo
Looks like they're using these libraries:
jQuery.scrollTo
easySlider
visualNav
You'll want to use jQuery's animate() function to adjust the window.scrollTop property to align with the appropriate div.
Related
https://www.codeigniter.com/user_guide/tutorial/index.html
Visit that link and look for the table of contents button at the upper right of the page. I want to apply that to the webpage I am making.
What do you call that design technique? Any links for tutorial on how to do it? Thank you very much.
To create that menu you can use css and jquery. Create a div with
position:absolute;top:-400px;width:auto;height:430px;
and you animate it with jquery. At click, set top:0px. You can use also animate jquery function.
LE:
$(document).ready(function(){
$('div a').click(function(){
$(this).parent().css('top','0px');
$(this).addClass('opened');
$(this).click(function() {
if($(this).hasClass('opened')){
$(this).parent().css('top','-280px');
}
})
});
});
<div style="width:100%;background-color:red;position:absolute;height:300px;top:-280px;"></div>
It's a sample code. From here you can edit it and you can animate it. Good luck!
I am facing some problem with pagination inside of jquery tabs .I have used Ajax pagination for that it works good but unfortunately when I click on any page no (in pagination) second time .Then it breaks the link .
Please look at the front view how it works:
http://kelts.wpengine.com/7664-top-o-the-morning-312/
open recent related posts->click on any page of pagination
please make sure that I am using wp-pagination();.
<script type="text/javascript">
jQuery(".larger.page").live("click", function(e) {
e.preventDefault();
var href = jQuery(this).attr("href");
show_posts(href.replace(/.*page\//, ""));
});
show_posts(1);
});
function show_posts(l) {
jQuery.get("<?php bloginfo('template_directory')?>/fetch-blog-post.php", {
pageno : l
}, function(data) {
jQuery("#show_posts").html(data).show();
});
}
</script>
Change your selector jQuery(".larger.page").live(...) to jQuery(".larger.page, .page.smaller").live(...).
Onces you visit a link the class larger is replaced by smaller that is why the link is broken in the second click.
why don't you try
$('.wp-pagenavi').on('click',function(){
// code
});
because .live is deprecated from now on.
From what I see the problem is that you get paginator itself as part of the AJAX response and don't bind events to a new DOM elements.
I am redoing my site and have at any time 80-120 vehicles, all identified in my db by their unique stock number. I'm using jQuery's accordion to list the vehicles:
http://www.login.carcityofdanbury.com/New/?cat=01
How do I embed edit.php?stock=__STOCK__ into the div of the open accordion, once the accordion opens?
I tried just using just an HTML <embed> tag, but it is making the page load extremely slow.
I am new to the whole jQuery, Ajax, coding thing and am completely a self taught "learn as I go" guy, so a demo, tutorial or example would be great.
You could use a combination of jQuery .load function (http://api.jquery.com/load/) and the jQuery UI Accordion change event (http://jqueryui.com/demos/accordion/#event-change) which gets triggered after an accordion slide opens:
$(document).ready(function(){
$("#listVehicles").accordion({
collapsible: true,
active: false,
autoHeight: false,
change: function(event, ui){
ui.newContent.load('edit.php', { stock: __STOCK__ });
}
});
});
When the change event is triggered, the edit.php file is loaded using AJAX and the HTML is dropped into the opened accordion slide.
You could get some help here:
http://api.jquery.com/jQuery.ajax/
Example:
$.ajax({
url: "yourPage.php",
success: function(data){
$("#youarea").text(data);
}
});
I would recommend using the jQuery load() function which is designed for this specifically. You give it an element, and a url and it will load the content into the element.
So, in your Accordion handling code, you'll want to place the following:
$('#elementToLoadInto').load('edit.php?stock='+id');
From there, your PHP page should server up a single (or multiple if needed) <div> element, not a full HTML page. That content will be placed into #elementToLoadInto exactly as it is, just like it was coded there.
jQuery can also load only a piece of the page, so you could also take advantage of that functionality if you need to return a full HTML page for some other reasons.
I am developing a web-page in PHP that needs following functionality:
1. When User click on "Say Thanks" it should be changed with "Done!".
2. At the same time I want to call an action in indexController.
3. At this time I want to show "loading...."
4. The current page has a lot of dynamic contents that should also not change.
Please suggest me what should I do to complete above tasks......
I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate action, ofc). Then I use jQuery for the AJAX magic:
$(function() {
$("a.CommentsListBtn").click(function() {
var tmpHref = $(this).attr("href");
var tmpLayer = $(this).parent().children("div.CommentsList");
tmpLayer.load(tmpHref, function() {
tmpLayer.stop().slideDown("medium");
});
return false;
});
});
I hope this helps.
Learn to use JQuery, JQuery UI. It isn't that hard! What I think you need to learn is the following for your problem:
.click()
.html()
jQuery.get()
I'm using jQuery to dynamically load php pages into my page using the .load() function, so far this has been successful but if you click on various links to update the div with the .load() it starts to flicker between the new clicked page and the old one, this is pretty annoying and has anyone got a fix?
Current code:
$(document).ready(function(){
$('a').click(function() {
$('#content').load($(this).attr("href"));
return false;
});
});
The flickering is possibly caused because the dimensions of the #content div vary between loads, try to slideTogle it before loading or use another transition between loads
example :
$(document).ready(function(){
$('a').click(function() {
$('#content').slideUp('slow',function(){
$('#content').load($(this).attr("href"),function(data){
$('#content').slideDown('slow');
});
})
return false;
});
});
I hope it is ok to question the premise. You're making all links use ajax to replace #content's contents? Doesn't that break the browser's forward/back button behavior? If so, I personally would not like to use such a site.