Develop Reference

jQuery code disabling links to other web pages

I have some jQuery code that allows for smoothing scrolling on my web pages.
$(document).ready(function(){
// browser window scroll position (in pixels) where the button will appear
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('make-visible-btt') : $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click', function(event){
event.preventDefault();
$('body,html').animate({
scrollTop: 0 ,
}, scroll_top_duration
);
});
});
$(document).ready(function() {
// browser window scroll position (in pixels) where the button will appear
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.make-visible-btt {
visibility: visible;
opacity: 1;
transition: opacity 1s 0s, visibility 0s 0s;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jump to last section
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section" id="last"></div>
Back to Top
The code works fine. When users click the "back to top" button on the page, they're automatically smooth scrolled to the top. All good.
The code above, however, doesn't work for in-page links.
text text text
So if a user clicks on a link like the one above, the pages instantly jumps to that section (which is the default behavior).
I added this code to fix that problem:
$(document).ready(function(){
$('a[href*="\\#"]').on('click', function(event){
var href = $(event.target).closest('a').attr('href'),
skip = false;
if (!skip) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
}
});
});
$(document).ready(function() {
// browser window scroll position (in pixels) where the button will appear
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
$(document).ready(function(){
$('a[href*="\\#"]').on('click', function(event){
var href = $(event.target).closest('a').attr('href'),
skip = false;
if (!skip) {
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
}
});
});
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.make-visible-btt {
visibility: visible;
opacity: 1;
transition: opacity 1s 0s, visibility 0s 0s;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jump to last section
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section" id="last"></div>
Back to Top
So now that's fixed.
But that second code block has created two new problems:
Links with a fragment identifier (e.g., #section-of-page) no longer update in the browser address bar. For example, within a page, on click, the page does scroll smoothly to the target section (so it works), but the web address stays fixed at www.website.com/whatever, when it should update to www.website.com/whatever#section-of-page.
Links with a fragment identifier don't work across pages. In other words, /this-web-page#section-of-page works fine. But /another-web-page#section-of-page and www.another-website.com/whatever#section-of-page both fail (click does nothing).
These problems didn't exist before adding that second code block.
Looking for some guidance on how to fix these problems.
Also if you can suggest a way to integrate all functions into one block of code, that would be great.
Lastly, I know about the CSS scroll-behavior property, but it's still very rudimentary (can't adjust any settings), so I'd rather stick with JS for now.
Thanks.

You can check if the href points to an internal location by creating a URL object from it and checking its host against window.location.host. Then call event.preventDefault and perform smooth scrolling only in that case.
The callback function (third argument) to $.animate can be used to set the hash properly after the scrolling effect.
if (new URL(href, window.location).host === window.location.host) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 500, function() {
window.location.hash = new URL(href, window.location).hash;
});
}
$(document).ready(function() {
// browser window scroll position (in pixels) where the button will appear
var offset = 200,
// duration of the animation (in ms)
scroll_top_duration = 700,
// bind with the button
$back_to_top = $('.back-to-top');
// display and hide the button
$(window).scroll(function() {
($(this).scrollTop() > offset) ? $back_to_top.addClass('make-visible-btt'): $back_to_top.removeClass('make-visible-btt');
});
//smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration);
});
});
$(document).ready(function(){
$('a[href*="\\#"]').on('click', function(event){
var href = $(event.target).closest('a').attr('href');
if (new URL(href, window.location).host === window.location.host) {
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top
}, 500, function() {
window.location.hash = new URL(href, window.location).hash;
});
}
});
});
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: inline-block;
height: 40px;
width: 40px;
background: url(../images/back-to-top.png) no-repeat;
background-size: contain;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border: 1px solid #aaa;
visibility: hidden;
opacity: 0;
transition: opacity .3s 0s, visibility 0s .3s;
}
.make-visible-btt {
visibility: visible;
opacity: 1;
transition: opacity 1s 0s, visibility 0s 0s;
}
.section {
border: 1px solid black;
background-color: #ededed;
height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
jump to last section
External link
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section"></div>
<div class="section" id="last"></div>
Back to Top

for The 1st problem is because of event.preventDefault();. If you remove this line then browser url will be updated accordingly.
if you see any problems then you try setting the url again after animation completes / finishes.
for syntax refer docs
$('html,body').animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
For 2nd problem
check wether the callback is hitting on click by putting debug point

fade-in an incoming image, fade-out an out going image

I have a logo that I want to fade-in when I hover on the image, and then fade out and be replace by the original when I hover out of the image. I almost got it working but the image double fades-in with this approach and the image does not fade-out. Any changes that can be done here. Here is my html, js and css. Run live example:
$(".opening").hover(function() {
$(".opening img").animate({
opacity: 1
}, "slow");
$(".opening img").css({
"width": 250
});
$(".opening img").attr("src", "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
}, function() {
$(".opening img").animate({
opacity: 0
}, "slow");
$(".opening img").css({
"width": 150
});
$(".opening img").attr("src", "http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg");
$(".opening img").animate({
opacity: 1
}, "slow");
});
.opening {
padding: 0 4.2%;
display: inline;
}
.opening img {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
</div>

You don't need JS for such simple :hover → fade tasks.
CSS is quite enough
.opening {
position: relative; /* add this */
display: inline-block; /* change */
}
.opening img {
width: 150px;
}
.opening img + img{ /* the second image */
position:absolute;
top:0;
transition: 0.8s; -webkit-transition: 0.8s;
visibility:hidden;
opacity:0;
}
.opening:hover img + img{
visibility:visible;
opacity:1;
width: 250px;
}
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
<img src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg" />
</div>
Also, if you change src using JS that means that your animation will always junk the first time since the image needs to be pulled from the server at the time you're trying to actually animate it.

try to use stop() to stop the currently-running animation

Why not this?
$(".opening").mouseenter(function(){
$(".opening img").fadeIn("slow", function () {
$(this).css({"width":250}).attr("src","http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
});
}).mouseleave(function () {
$(".opening img").fadeOut("slow", function () {
$(this).css({"width":150}).attr("src","http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg").fadeIn("slow");
});
});

CSS/JS: Animate Inline Element Upon Text Change

When an inline element's text changes, it is usually the case that its computed width or height changes as well.
Usually it's trivial to transition property changes with CSS, for example, adding a transition to change the background-color of an element upon hover.
However, inline element dimensions are really tricky. A simple transition property does not animate the change in computed width.
View example an by clicking here: https://jsfiddle.net/mz103/59s42ys4/ or viewing it below:
$("div").on("click", function() {
$(this).text("Although my width changes, it is not aniamted.");
});
div {
display: inline-block;
background-color: red;
padding: 8px 16px;
transition: width 0.3s; // Notice, this doesn't transition the width upon change.
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click me.</div>
How, when the text of an inline element changes, can we animate those changes?

Here an Update: https://jsfiddle.net/ky3c5Lec/3/
$("div").on("click", function() {
//get the current Dimensions, as Start-value for the animation
var $this = $(this),
sw = $this.width(),
sh = $this.height();
$this.text("New text");
var tw = $this.width(),
th = $this.height();
$this.css({
//since jQuery.animate() doesn't have sth. like Tween.from()
//we have to reset the styles to the initial values
width: sw, height: sh
}).animate({
//and then animate
width: tw, height: th
}, function(){
//and when the animation is done, we clean up after ourselves
$this.css({
width: "", height: ""
});
})
});

You could try a little bit of jQuery animation:
function changeText(el) {
el.animate(
{
opacity: 0
},
{
duration: 'slow',
complete: function () {
$(this).text('New Text');
$(this).animate({opacity: 1}, 'slow');
}
});
}
Here is a fiddle.

I suppose that you will need two elements to achieve this elegantly:
$(".inner").on("click", function() {
var $this = $(this);
var $par = $this.parent();
$par.css({
width: $par.width()
});
$this.text("New text");
$par.css({
width: $this.outerWidth()
});
});
.inner {
display: inline-block;
padding: 8px 16px;
white-space: nowrap;
}
.outer {
display: inline-block;
transition: width 300ms ease-in-out;
background-color: red;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="inner">Here's some text.</div>
</div>

Flash text effect on image

The problem is that when I MouseHover over the image works fine but if I mouseover on the title, this have flashes. Example: http://www.adminvps.com.ar/trabajos/sofi_v/pintura.html
Mi code is:
$(document).ready(function () {
$('.item a img').hover(function () {
id = '.' + $(this).attr("id");
$(this).stop().animate({
opacity: .2
}, 200);
$(id).removeClass('hide');
}, function () {
$(this).stop().animate({
opacity: 1
}, 500);
$('.text').addClass('hide');
});
});
.text {
z-index: 1;
position: absolute;
color: #000000;
margin: 30px 0px 0px 30px;
font-weight: bold;
font-size: 13px;
line-height: 18px;
}
.text span {
color: #808080;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="item">
<div class="id1 text hide">Title <br /> texto</div>
<img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</div>
<br />
<div class="item">
<div class="id2 text hide">Title <br /> texto</div>
<img id="id2" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</div>
Any idea how to remove the flash?
Thanks

This can also be achieved by using CSS3 transitions (pure CSS, no JS)
This is the fiddle I just wrote from your code with a working example.
And these are the lines added to it:
.item img {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.item:hover img {
opacity: 0.2;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
.item:hover .hide {
display: block;
}
I had to point at the img instead of the whole div (.item) because the text was getting less opacity too.
Hope this helps you.

When your mouse goes from the img tag to the div tag it triggers the mouseout event (the second function you have in the hover).
You can check inside this function if the new element is that specific div - and if so just do nothing.
This code will do the trick:
$(document).ready(function () {
$('.item a img').hover(function (e) {
id = '.' + $(this).attr("id");
$(this).stop().animate({
opacity: .2
}, 200);
$(id).removeClass('hide');
}, function (e) {
if (e.toElement == $(this).parents('.item').find('div')[0]) {
return;
}
$(this).stop().animate({
opacity: 1
}, 500);
$('.text').addClass('hide');
});
$('.item div').hover(function(e) {
return false;
}, function(e) {
return false;
});
});
Notice I added the e variable (it's the Event var) to the function so I can use it inside.

That happens because the title is outside the image where you're setting the event.
One solution would be to place the title div inside the a element and assign the event to the a's hover instead of the img, like this:
<div class="item">
<a href="#">
<div class="id1 text hide">Title <br /> texto</div>
<img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
</a>
</div>
And
$('.item a')
Instead of
$('.item a img')
Also the a element should have at least the same width and height as the img element, so the event is triggered properly. This can be easily accomplished by making it display as a block:
a {
display: block;
}
Hope it helps.

run keyframes-animation on click more than once

i have a div that it have image content .i wanna implement animation when i click in image but it do only with first click and next click in image is Ineffective.what is problem and how can i solve it?
$(function () {
$('div.c').bind('mousedown', function () {
var $elem = $(this);
$elem.stop(true)
.css({ "-webkit-animation-name": "xi",
"-webkit-animation-duration": "3s",
"-webkit-animation-timing-function": "ease",
"-webkit-animation-delay": "1s",
})
})})
and
#-webkit-keyframes xi{ 0% {
left: 100px;
}
40% {
left: 150px;
}
60% {
left: 75px;
}
100% {
left: 100px;
}}

You could reset your animation with a second keyframe block as suggested here:
Css and jQuery: How do I trigger the repositioning of a CSS3-animated element back to where it was before the animation?
Here's also a possible solution on how to reset your animation when it's completed:
Is there a callback on completion of a CSS3 animation?