I can't get this to smoothly scroll down to the anchor for some reason. Can anybody see why?
This is the html:
<div id="onward">
<a href="#xdroneslogan" class="btn">
<i class="icon-chevron-down icon-white"></i> Onward
</a>
</div>
This is the javascript:
<script>
$("#onward a").click(function(){
var onwardId = $(this).attr("href");
$("html, body").animate({scrollTop: $(onwardId).offset().top}, "slow");
return false;
});
</script>
Try this out:- http://jsfiddle.net/adiioo7/bguAG/1/
JS:-
$("#onward a").click(function () {
var onwardId = $(this).attr("href");
$("html, body").animate({
scrollTop: $(onwardId).offset().top
}, "slow");
return false;
});
HTML:-
<div id="xdroneslogan" style="height:1000px;background:red;"></div>
<div id="onward">
<i class="icon-chevron-down icon-white"></i> Onward
</div>
Also make sure the jQuery.fx.off is set to false.
Related
I have a button that when clicked smooth scrolls to an anchor point on the same page. The problem is the script has disabled all hyperlinks on the page. How can I fix this so my extenal hyperlinks work again and the demo button smooth scrolls down the page?
This is the stripped down code where my button resides and the associated javascript:
<body data-spy="scroll" data-offset="80">
<div class="other">
<div class="container">
<div class="col-md-12">
<div class="center-header"><button type="submit" class="btn btn-theme-bg btn-lg">Demo</button></div>
</div>
</div>
</div>
<div id="demo" div class="center-header"></div>
<script>
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
</script>
</body>
HTML:
<a href="#demo" class="someClassName">
JS:
$(document).on('click', '.someClassName', function(event){
After observing your code I have seen that you are using jQuery to bind click event to the anchor tag. Which will bind click event of all anchor tags. It's causing your anchor tags from click. I suggest to use below code.
$(document).on('click', 'a', function(event){
if ($.attr(this, 'href').indexOf("#") === 0) {
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
}
});
I have two div elements:
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
I want to get the href from my contact-sm class and replace the href of my contact-img class with Xing link. So if I click on the contact-img, the Xing Page of this person should open in a new window.
Thanks for your help
The best way would be to change your HTML. But if you "need" to have it the way you described then check this jQuery snippet:
($(function(){
$('.contact-img > a').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('.contact-sm > a')[0].click();
})
}))(jQuery);
The below code snippet will help you.
$(document).ready(function(){
$('.contact-img a').click(function(){
$(this).attr('href', $('.contact-sm a').attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts" >
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep"/>
</a>
</div>
<div class ="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander">
</div>
$(function() {
var xingHref = $(".contact-sm > a").attr("href");
$(".contact-img > a").attr("href", xingHref);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-img">
<a href="https://test.de" class="evcms-open-contacts">
<img src="https://cdn-cache.envivo-connect.com/license/Tw3sZjz8v/p/xckYV8bESwsZ/80x80c/xckYV8bESwsZ.png?v=2.4.84-z3p37YEER-1467970717-yZUA33Hxn" alt="F. Alexander Kep" />
</a>
</div>
<div class="contact-sm">
<a href="https://www.xing.com/profile/FfAlexander" />
</div>
In case above this should do:
var desiredHref = $('.contact-sm a').attr('href');
$('.evcms-open-contacts').attr('href', desiredHref);
This can be written in one line, of course, but for the sake of answer.
$(document).ready(function() {
$("#main1").attr("enter code herehref" , "https://www.xing.com/profile/FfAlexander");
});
I want to add a class when clicking on a a tag inside a div.
When clicking on the I want to add the class "show".
I use this HTML:
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
See the JSFiddle: http://jsfiddle.net/8wLze4rf/2/
I edited your fiddle, i think this is what you want to do. On click the class gets added and on another click (anywhere on the page) it gets removed.
$(".liveChatLabel").click(function(){
$(".liveChatContainer").addClass("show");
});
$('html').click(function() {
$(".liveChatContainer.show").removeClass("show");
});
$('.liveChatContainer').click(function(event){
event.stopPropagation();
});
JSFiddle
Add jQuery library.
Use this script:
$(document).ready(function() {
$('.liveChatContainer a').click(function() {
$('.actions a').removeClass('show');
$(this).addClass('show');
return false;
});
});
HTML
<div id="liveChatContainer" class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
<a id="liveChatLabel" href="#" class="liveChatLabel">Contact</a>
</div>
JS
$(document).ready(function(){
$('#liveChatLabel').click(
function(){
$('.actions a').removeClass('show');
$('#liveChatContainer').toggleClass('show');
return false;
});
});
$(document).mouseup(function (e)
{
var container = $("#liveChatContainer");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.removeClass('show');
}
});
JSFiddle
I've used toggle to add and remove the class, here's a fiddle of it:
http://jsfiddle.net/8wLze4rf/8/
$(document).ready(function(){
var button = $('.liveChatContainer');
button.on("click",function(){
button.toggleClass('show');
});
});
$(document).click(function(e) {
$('.liveChatContainer').removeClass('show');
});
$('.liveChatContainer a').click(function(e) {
$('.liveChatContainer').addClass('show');
e.stopPropagation();
});
$('.liveChatContainer').click(function(e) {
e.stopPropagation();
});
.show {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="liveChatContainer online">
<div class="actions">
<span class="item title">Need help?</span>
<i class="fa fa-smile-o"></i>Chat
<i class="fa fa-smile-o"></i>Call
<i class="fa fa-smile-o"></i>Email
</div>
Contact
</div>
use setAttribute("class","actions"); to your link in java script
I've got a following html structure:
<a class='support'>Podpořit</a>
<div class='fa'>
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'></a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'></a>
</div>
And this is my javascript code:
$(".support").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).hide();
});
$(".support").mouseleave(function() {
$(this).show();
$(this).next().hide();
});
I want to show the .fa div on .support hover and if I leave the area, I want to show .support back again. How can I do it? Now it's blinking :-(
Wrap it in a div and do like this,
$(".containerDiv").mouseover(function() {
activeButton = $(this).next();
activeButton.show();
$(this).find(".support").hide();
});
$(".containerDiv").mouseleave(function() {
$(this).find(".support").show();
$(this).next().hide();
});
In your code your are hiding the element itself which in turn cause the mouse leave event to trigger.
Fiddle
$(function() {
$(".support").mouseover(function() {
$(this).children("div").show();
$(this).children("a").hide();
});
$(".support").mouseleave(function() {
$(this).children("div.fa").hide();
$(this).children("a").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="support">
<a>Podpořit</a>
<div class='fa' style="display:none">
<a id='1' href='drak1 (1).jpg' class='fa-envelope mail-voting'>Random content</a>
<a id='1' href='drak1 (1).jpg' class='fa-facebook facebook-voting'>Random content</a>
</div>
</div>
I added a container because you can't put a mouseleave event on an element you are hiding, because it will trigger as fast as it hides.
This is what my current link looks like:
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="square">
<span class="ttt_square">
</span>
</a>
I know it's not ajax because the jQuery ajax:success type events are never invoked.
This is teh site that I'm working on: http://ttt-ai.heroku.com/
If you want to disable all links on a page you can use this:
$("a").live('click', function(e) {
e.preventDefault;
return false;
});
Or you can target specific links like this:
$("a.disabledLink").live('click', function(e) {
e.preventDefault;
return false;
});
<a href="/board/take_turn?id=313&x=1&y=2" data-remote="true" class="disabledLink">
<span class="ttt_square"> </span>
</a>
Try this,
<script type="text/javascript">
$(function() {
$('a').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
And if you will add a class to your link for being more specific; let's say
<a class="disableAfterClick" href="/board/take_turn?id=313&x=1&y=2" data-remote="true"> <span class="ttt_square"> </span> </a>
than
<script type="text/javascript">
$(function() {
$('a.disableAfterClick').click(function() {
$(this).attr('href', 'javascript:void(0);');
});
});
</script>
You can use e.preventDefault() .
var $a = $("a");
$a.click(function() {
$a.click(function(e) {
e.preventDefault();
}
});
no need to traverse twice, or if you do
$("a").live("click", function() {
$("a").click(function(e) {
e.preventDefault();
}
});