I've not found an answer really specific to my case, which I would imagine is common. I'm looking to add the scrollTo effect to my webpage using jquery (or javascript). I still don't know what is the easiest way granted I've not gotten anything to work. :(
I have a single vertical page. Navigation is on the bottom of each div wrapper. I'd like my button areas to scroll to the divs. As of now, I've styled the buttons to link to the Divs. That's perfect, except, I need to add the animation.
You can have a look at my test page here: my site
I've tried scrollTo, but each of my buttons links to a specific div. Not sure how to modify the plugin to work for me.
I think the next best solution is inserting javascript that animates all links in a window? Definitely don't know where to find that code or how to modify it for my case.
Thanks in advance everyone, and I look forward to a solution from what seems to be a very vibrant community.
Try something like this...
working example: http://jsfiddle.net/BTncy/
$(document).ready(function(){
$('a').click(function(){
var ele_href= $(this).attr('href');
$('html,body').animate({scrollTop: $('#' + ele_href).offset().top},'slow');
return false;
});
});
(Note, from your example you have the javascript in the title attribute, not an onclick, not sure if that's intended)
This doesn't use a plugin, but you could do something as simple as the following using jQuery:
function scrollTo (element) {
var target = $(element).offset();
$('body').animate({scrollTop: target.top}, 'slow');
}
This allows you to just specify the selector to what you want to scroll to, so it could be as simple as:
<div id="more">
<a onclick="scrollTo('#intro_2_container'); return false;" href="#into_2_container">
<img src="images/more.png" border="0" />
</a>
</div>
In my quick testing that seemed to work. (After I fixed the typo of the target element in the scrollTo call)
Related
I am trying to make a div to be an HREF. I have done it by using javascript...
var about = $('#about');
about.click(function(){
$(location).attr('href', '#quienes-somos');
});
So when I click the "about" div, I can go to the "quienes-somos" div.
However, I need to give the link a scroll effect. I was doing some research and I found that I could use the animate() method of jQuery, but I didn't really find out how to apply it to my script.
Thanks so much for any help you can give me!
Mauricio
I have a large Joomla CMS Website I'm working on.
Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.
.tabs:nth-of-type(4)
{
display:none !important;
}
But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.
Update: This is what I currently have via the suggestions below but it isn't working:
$(document).ready(function() {
$('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>
Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?
I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers
Update: This is what I have via the current suggestions below but it isn't working!
$(document).ready(function() {
$('.tabs:contains("Location").css( "display: none;" )')
});
I do not believe what you are asking for exists with pure CSS at this time.
What I would do is use jQuery's :contains() selector:
$('span.tabs:contains("Location")')
or even better:
$('#idOfTabsContainer span.tabs:contains("Location")')
And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:
$(document).ready(function() {
$('#idOfTabsContainer span.tabs:contains("Location")')
});
Jquery :contains() Selector should work. I think you have an error in .css() function syntax.
Please try with:
jQuery(document).ready(function(){
$( '.tabs:contains("Location")' ).css( 'display', 'none' );
});
Hope this helps
There used to be a :contains selector that they were going to add to CSS.
But alas, you may have to resort to some JS, as addressed already here
jQuery's got your back though:
$('.tabs:contains("Location")')
Problem: I need to hide a menu tab globally across the entire site.
Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.
Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.
.hide-me-with-css {display: none;}
I'd like the content inside <div class="tcw-content"> to change, when another div is clicked, however I have never used Ajax (maybe it doesn't have to be done in Ajax, but I can't think of a JS/CSS way, examples appreciated :) ), would anyone have any examples for me please? For example, the user will click onto <li id="tab-tab_700964" class="grp"><a>Group A</a></li> and as soon as the hotspot is clicked, the content inside the above mentioned div will change.
How can I achieve this?
You can use jQuery, example:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#tab-tab_700964 a').on('click', function(){
$('.tcw-content').html('hey');
});
});
</script>
<li id="tab-tab_700964" class="grp"><a>Group A</a></li>
<div class="tcw-content">
hello
</div>
Go take a look at jQuery. It makes this pretty easy. Your example would look like this:
$('.grp a').click(function(e) {
e.preventDefault();
$('.tcw-content').html('new content goes here');
});
To explain, $ is the jQuery object. When you use it as a function with a string, it finds all elements matching that selector, almost exactly the same way CSS selectors work. Then, there are a variety of functions you can call on these matched elements. In this case, we call click() and pass it a function that will be run when the link is clicked on. Inside of that function, we find the div using $('.tcw-content') and update its contents by using the html() function.
jQuery's documentation is quite good. Start playing with it, maybe using jsFiddle as a sandbox.
Maybe you are looking for a content slider.
HTML Content Slider
:: Featured Content Slider v2.5
Examples
40 examples
do it with jquery. Include the jquery library, and then add a new javascript file with a document.ready event. Inside the document ready, just add something to listen for when your div is clicked. Read here:
http://www.w3schools.com/jquery/event_click.asp
http://api.jquery.com/click/
I'm a bit new to jQuery and I have difficulties in achieving a function so I really hope somebody could guide me a bit. What I basically want to do is to highlight 2 elements simultaneously (via toggleClass).
Basically I have a repeating div (#post) which contains a title, thumb and description div. What I would like to do is once I hover on the title or the thumb div the elements to get a new additional class (xxxHover). So basically once the user hovers the mouse on the title/thumb div the title/thumb div (both of them) get a new class called (xxxHover where xxx stands for the div name - in this case titleHover/thumbHover).
I might not be the best in explaining so I've prepared a jsFiddle as well:
http://jsfiddle.net/yLqnd/12/
As you can see my problem is to restrict the scripts for the current element only (#post in our case). If it helps or matter I have to say that this will be integrated into a WordPress website (so the HTML structure is basically in the loop.php), that's why I would like to restrict the 2x highlight effect only per item (#post).
Thanks a mill in advance for any idea!
http://jsfiddle.net/oscarj24/yLqnd/13/
Here's an updated jsFiddle:
Instead of being so specific, any div's inside will now toggle the class
jsFiddle Link
Basically I pushed it all together:
$(".post div").mouseover(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).closest('.post').find('div').toggleClass('thumbHover');
});
I think you can get the effect you're looking for by using .siblings() in jQuery.
$(".title").mouseover(function(){
$(this).toggleClass("titleHover");
$(this).siblings(".thumb").toggleClass("thumbHover");
});
This will limit the toggleClass to only the .thumb that resides in the same .post.
http://api.jquery.com/siblings/
simples, just do it on the parent of both elements:
$(".post").mouseover(function(){
$(this).find('div').toggleClass('thumbHover');
}).mouseout(function(){
$(this).find('div').toggleClass('thumbHover');
});
i just made a jquery work to hide and show a link on a image. the 'a' seated as position absolute on image.
To do this, i made this code :
$(document).ready(function(){
var caseStudySlider = $('div.case-study-slider img');
caseStudySlider.bind('mouseover',function(e){
$(e.target).closest("a").toggle();
})
})
and this this my HTML code as well on the page :
<div class="case-study-slider">
<span class="slider-player"></span>
<img height="270" width="702" alt="slider" src="images/slide-space-holder-type2.jpg" />
</div>
But it's not work. any one help me that, what this the issue with my code?
Thanks on Advance!.
The code
$(e.target).closest("a")
starts at the mouseover target (most likely img?) and looks for a link upwards in the tree. Your link isn't directly up from the image, so the selector doesn't find it.
Given your current html structure, I would instead find the link like this:
$(e.target).closest(".case-study-slider").find("a")
There's nothing in the link to show.
I suspect your problem is that mouseover will trigger on entry, but not on exit, so your .toggle() doesn't know whether it's coming or going. Try .hover() instead:
$(document).ready(function(){
var caseStudySlider = $('div.case-study-slider img');
caseStudySlider.bind('hover',
function(e) {
$(this).siblings("span").children("a").toggle();
}
);
});
NB: functions changed to use .siblings() as the a isn't a child node of the img.
EDIT changed to the single callback version of .hover() which is more consistent with using .toggle() instead of the dual callback version using .show() and .hide().