I am having trouble creating a jQuery function that is called by an HTML onclick event handler that finds the ID of that particular element, adds a "#" to the start of it and "-container" to the end and assigns it to a variable. This variable is then used to scroll the window to that particular div. My HTML is as follows and the jQuery function is below it.
<div class="skill-grid">
<div id="science" onclick="ScrollToDiv()">
<div class="skill-text">science</div>
</div>
<div id="coding" onclick="ScrollToDiv()">
<div class="skill-text">coding</div>
</div>
<div id="photography" onclick="ScrollToDiv()">
<div class="skill-text">photography</div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
The function in jQuery I have written is as follows:
<script type='text/javascript'>
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top }, 2000);
}
</script>
I do feel like I am missing something very simple. Any help would be much appreciated! I am also open to a new/better way to do this!
My thanks for your time,
Finn
update this:
onclick="ScrollToDiv(this)"
// in the above parameter you have to pass the current object's context.
pass the current context in your method. and update the function as:
function ScrollToDiv(el) { // <---get the current object from the param here
var container = "#" + $(el).attr('id') + "-container";
//----^^^^^ wrap it as jQuery object
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
Try to be unobtrusive as much as possible:
As you are using jQuery do this:
put your original function in global scope:
function ScrollToDiv() {
var container = "#" + $(this).attr('id') + "-container";
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
and add this script:
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});
Or if you can change your ids to class like this:
<div class="skill-grid">
<div id="science">
<div class="skill-text">science</div>
</div>
<div id="coding">
<div class="skill-text">coding</div>
</div>
<div id="photography">
<div class="skill-text">photography</div>
</div>
</div>
<div class="science"></div>
<div class="coding"></div>
<div class="photography"></div>
then you can do this:
function ScrollToDiv() {
var container = "." + this.id;
$('html, body').animate({
scrollTop: $(container).offset().top
}, 2000);
}
jQuery(function($){
$('.skill-grid > div').click(ScrollToDiv);
});
re-think your html struct if you can:
<div class="skill-grid">
<div id="science">
<div class="skill-text"><a class="click" href="#science-container">science</a></div>
</div>
<div id="coding">
<div class="skill-text"><a class="click" href="#coding-container">coding</a></div>
</div>
<div id="photography">
<div class="skill-text"><a class="click" href="#photography-container">photography</a></div>
</div>
</div>
<div id="science-container"></div>
<div id="coding-container"></div>
<div id="photography-container"></div>
<script>
$(function(){
$('a.click').on('click', function(e){
var offset = $(this.hash).offset().top;
$('html, body').animate({
scrollTop: offset
}, 2000
);
return false;
});
});
</script>
Related
I have the following snippet:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
<div class="tabbedContent">
<div class="imageWrapper">
<div class="image" data-item="item--1">
<!-- image -->
</div>
<div class="image" data-item="item--2">
<!-- image -->
</div>
</div>
<div class="tabs__rapper">
<div class="tab" data-item="item--1" >
<!-- tab text here -->
</div>
<div class="tab" data-item="item--2" >
<!-- tab text here -->
</div>
</div>
</div>
Basically, when a user clicks a tab, it displays an image assigned to that section (they're linked through data-item).
However, with the following:
$('.image[data-item = ' + tabID + ']').addClass('active');
If I have two of these tabbed modules on one page (if I have two on the same page, the data-items will be the same as they both start from 1), then images in both sections change.
What I'm trying to do is change the tab that's in scope by using this.
However, I'm unsure on how to do this, I've tried (need something like this):
$(this + '[data-item = '+tabID+']').addClass('active');
Am I far off?
try to stop the event propagation when declaring it :
$(".tab").on("click", function( event ) {
event.stopPropagation();
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
Since.tab is scoped inside .tabbedContent:
$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
Assuming, .image is inside .tab, you can change the tab that's in scope by using:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
});
I want to make smooth scrolling for some links in an HTML website using jQuery.
var main = ["#main1", "#main2", "#main3", "#main4"]
$(document).ready(function () {
$("a").on('click', function (event) {
if (this.hash ==|| this.hash == "#top") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
window.location.hash = hash;
});
}
});
});
I need this animation to work on my main array and #top ID;When I use loop for main it won't work properly.
is there another way?
I can make the animation to work on all the links but how do I make exceptions for some links?
Changed your js a bit
$("a").on('click', function(event) {
if (this.hash && main.includes(this.hash)) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
Basically this line if (this.hash && main.includes(this.hash)) {
$(document).ready(function() {
var main = ["#main1", "#main2", "#main3", "#main4", "#top"];
$("a").on('click', function(event) {
if (this.hash && main.includes(this.hash)) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
window.location.hash = hash;
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top">
</div>
<div id="main1" style="height: 200px;background-color:red;">
<a href="#main2">
Go to Main 2
</a>
<br/>
<a href="#main5">
Go to Main 5 withoout animation
</a>
</div>
<div id="main2" style="height: 200px;background-color:skyblue;">
<a href="#main3">
Go to Main 3
</a>
<br/>
<a href="#top">
Go to Top
</a>
</div>
<div id="main3" style="height: 200px;background-color:green;">
<a href="#main4">
Go to Main 4
</a>
<br/>
<a href="#top">
Go to Top
</a>
</div>
<div id="main4" style="height: 200px;background-color:yellow;">
<a href="#main1">
Go to Main 1
</a>
</div>
<div id="main5" style="height: 200px;background-color:red;">
<a href="#main1">
Go to Main 1
</a>
</div>
I was just wondering how to fade out a page then open up another html page. Right now I have:
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
I want it so that when "close" is clicked, the page fades out then then opens up my index.html page?
Currently my code is not working :(.
Thanks in advance!
Try this
HTML
<div class="close" data-link="https://www.youtube.com">
<div class="lr">
<div class="rl">LOREM IPSUM DOLORs</div>
</div>
</div>
JS
$('.close').click(function() {
var destination = $(this).data("link");
$("body").fadeOut(1000,function(){
window.location.replace(destination);
});
});
There is no a tag in your html. This code should work.
<div class="close" onclick="window.location.href='../index.html';">
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close').click(function() {
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
});
</script>
</div>
Your JavaScript has an extra closing bracket and closing parenthesis. You are also missing your a
<div class="close">
Click Here
<div class="lr">
<div class="rl"></div>
</div>
<script>
$(function() {
$('.close a').click(function(e) {
e.preventDefault();
var destination = this.href;
$('body').fadeOut(2000, function() {
window.location = destination;
});
});
return false;
});
</script>
JS Fiddle: https://jsfiddle.net/4wz9uqwd/
$(document).ready(function() {
$(window).bind("unload", function() {
});
$("body").css("overflow", "scroll");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1500, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
Live example:
www.damianodesign.com
I have next structure - there are 7 blocks:
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="..."></a>
</div>
</div>
I want to receive href of the inner link, delete its parent block with link and add a link inside block with class="blog-item" with the same href as deleted link...
I had wrote this:
<script>
jQuery(document).ready(function() {
jQuery(".blog-item a.readmore-link").each(function() {
var ahref = jQuery(this).attr("href");
jQuery(this).parent('.jcomments-links').remove();
jQuery(this).parent().closest('.blog-item').wrapInner(function () {
return "<a href='" + ahref + "'></a>"
});
});
});
</script>
But something wrong. There will not appear new link. Any help will be greatly appreciated. Thanks
Try this (run the snippet to see it work, and you'll have to use the inspector to see that the html is correct):
jQuery(document).ready(function ($) {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href"),
$wrapItem = $(this).closest('.blog-item');
$(this).closest('.jcomments-links').remove();
$wrapItem.wrapInner('<a href="' + ahref + '"/>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="blog-item">
<h2>Heading</h2>
<p>Paragraph</p>
<div class="jcomments-links">
remove
<a class="readmore-link" href="http://www.example.com">example</a>
</div>
</div>
its because you are deleting $(this) when you remove the .parent('.jcomments-links') from the DOM, so the reference to add the <a> to the .blog-item has not reference when you say $(this).closest() cause there is no more $(this).
try this:
$(document).ready(function() {
$(".blog-item a.readmore-link").each(function () {
var ahref = $(this).attr("href");
$(this).closest('.blog-item').append("<a href='" + ahref + "'>This is my new link</a");
$(this).parent('.jcomments-links').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blog-item">
<h2>...</h2>
<p>...</p>
<div class="jcomments-links">
<a class="readmore-link" href="this-is-my-href-i-want">This is the Link woo woo</a>
</div>
</div>
How can I shorten this code? Each css selector increases +1. All Bio's divs are hidden unless the .mug(x) is selected.
Thanks
<script type='text/javascript'>
$(document).ready(function () {
$(".mug1").click(function() {
$("#bios div").hide();
$(".bio1").show();
});
$(".mug2").click(function() {
$("#bios div").hide();
$(".bio2").show();
});
$(".mug3").click(function() {
$("#bios div").hide();
$(".bio3").show();
});
});
</script>
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug" class="mug1"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug2"/>
<img src="images/img-mugshot.jpg" alt="mug" class="mug3"/>
</div>
<div id="bios">
<div class="bio1"></div>
<div class="bio2"></div>
<div class="bio3"></div>
</div>
Something along these lines?
Change the html to this:
<div id="bios">
<div class="bio" data-id="1"></div>
<div class="bio" data-id="2"></div>
<div class="bio" data-id="3"></div>
</div>
Then your js to this:
$(".mug").click(function() {
$("#bios div").hide();
$(".bio[data-id='" + $(this).data("id") + "'", $("#bios")).show();
});
This way you could add as many mugs and bios as you like without having to add any more js.
Simplest way is a for loop
$(document).ready(function () {
for (var i = 1; i <= 3; i++) {
$(".mug" + i).click(function() {
$("#bios div").hide();
$(".bio" + i).show();
});
}
});
There may be a better way still that I'm not thinking of.
just use index and add as many as you want:
$('#mugshots>img').on('click', function() {
$("#bios div").hide();
var myIndex = $(this).index("#mugshots> img");
$("#bios> div").eq(myIndex).show();
});
a shorter version of this is:
$('#mugshots>img').on('click', function() {
$("#bios div").hide().eq($(this).index("#mugshots> img")).show();;
});
Use the .eq() and the index of your mugshots, assuming the first mugshot goes with the first bio, second mugshot with second bio, and so on.
http://api.jquery.com/eq/
Also, use a class to keep track of your active bio rather than calling hide on all bios for each update.
JS:
$(document).ready(function() {
$('#mugshots img').click(function() {
$('#bios .active').hide().removeClass('active');
$('#bios div').eq($(this).index()).show().addClass('active');
});
});
HTML:
<h2>Meet the team</h2>
<div id="mugshots">
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
<img src="images/img-mugshot.jpg" alt="mug"/>
</div>
<div id="bios">
<div></div>
<div></div>
<div></div>
</div>
try this:
$(document).ready(function () {
$("img[alt=mug]").each(function() {
$(this).click(function(){
var id = $(this).attr("class").substr(3, 1);
$("#bios div").hide();
$(".bio" + id).show();
});
});
});