Put an HREF in a DIV and give an scroll effect - javascript

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

Related

How to add a link within a .html()

I am using a .click function to switch out text based on menu clicks. (example:http://jsfiddle.net/3r9hcz3z/) It works great except that I am still pretty new to Jquery & I can't figure out how to add a link inside of on one of the .html() menu items.
Any help would be awesome. I know that there is a way to do it within the Jquery but just can't find the right coding. Thanks!
$('#menuone').click(function(){
$('#title').text("ONE");
$('#text').html("This is text & where I would like to be able to add a link");
});
$('#text').html("<a href='someUrl'>Link</a>");
This should do it.
one clean way to do this is to add a class to your anchor, and then set its href attribute through .attr:
$('.a_class').attr('href','http://example.com');

Take href of an anchor in a div and apply it to an image?

I have a div with an image and a link in it.
Is it possible that on page load, I can somehow find the href of the link and apply that the anchor tag of the image?
I know this may seem like a strange request, i jsut asking if it can be done, and if so, how?
http://jsfiddle.net/fFgwb/
Sorry everyone, I want the image to be wrapped in an anchor tag, witht he same href as the 'continue reading' link
Still making assumptions about positioning of the elements, but the basics are below. Its very simple to do this in pure JS without needing to include jQuery.
Live Demo
var link = document.querySelectorAll('.card-prod a');
link[0].href = link[1].href;
try this:
$(document).ready(function(){
$("#theDiv").find("a").attr("href", $('img').attr('src'));
});
updated:
$(document).ready(function(){
$("#anchor").attr("href", $('#continue').attr('href'));
});
http://jsfiddle.net/fFgwb/5/
so, you should add classes like .divs to divs and other classes to anchor links:
$(document).ready(function(){
$(".divs").each(function(){
$(this).find("a").hasClass("anchor").attr("href", $(this).find("a").hasClass("continue").attr('href'))
});
});

Write a function inside jquery .html()

I am running a bg slider..."Supersized - Fullscreen Slideshow jQuery Plugin"
what i need is when a background changes some contents in a specific div must also change...
here i found a code line from script
if (options.slide_captions)
$('#slidecaption').html(options.slides[currentSlide].title);
this one pulls the image title to a specific div, but i want to load unique div for each background change...
or is there any other ways to do??
i have very little knowledge in jquery...
please help
advance thanks...
you can write this:
if (options.slide_captions) $('#slidecaption').html(options.slides[currentSlide].title, function(){
//write the code that load the unique div
});
tell me if it works
http://buildinternet.com/project/supersized/docs.html#theme-after
Check-out the theme.afterAnimation( ) documentation. You can set it to a function that changes the content after the slide changes.

JQuery-how to get a imagelink as pop up on mouse hover on a div tag

I have a tag on a html page on which I am trying to write a jquery function in order to pop open a image link on "hover" which when clicked on, takes me to another web page. I need to set the "navigateURL" property on the link on "hover".
I am fairly new to jquery.
Can somebody please suggest me a good approach for this?
I highly appreciate any help you can offer.
Thanks
$('#tagdiv').hover(function(e)
{
$('#hoverdiv').html('<div><image src="'+$(this).html()+'"/></div>');
});
where 'hoverdiv' is id of any div which is on that page and 'tagdiv' is id of where you want to hover event.
like:
<div id='tagdiv'>image.jpg</div>
<div id='hoverdiv'> </div>

scrollTo: Getting button images to scrollTo divs

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)

Categories