Currently I have this JS code:
$('.tile').on('click', function() {
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
}, 2000);
});
I also have some HTML <a> which are buttons and they are all called tile
I want to load the specific href defined in the <a> as seen here with two of them:
<a class="tile double bg-tile7color animated seven flipInX" data-click="transform">
<div class="tile-content image">
<div class="padding10">
<h2 class="fg-white ntm">Cost</h2>
<p class="fg-white ntm">Pricing and Proposals</p>
</div>
<div class="brand">
<div class="label"></div>
</div>
</div>
</a>
<a class="tile bg-tile8color animated eight flipInX" data-click="transform">
<div class="tile-content icon">
<span>
<img src="images/mthc/referrals.png">
</span>
</div>
<div class="brand">
<div class="text-center padding10 ntp">
<p class="fg-white">Referrals</p></div>
</div>
</a>
How do I change the JS to load whatever they have in their href's and not what is currently specified in the .load() part of the function? Currently it's loading company-overview.html. While that is the case I will also need to make the color changes unique to the buttons so is there any way to integrate this change into the s ?
Simply replace load("company-overview.html") with .load($(this).attr('href') to reference the href attribute of the current/target .tile being clicked:
$('.tile').on('click', function(e) {
e.preventDefault(); // stop the default link click behavior
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson').css('backgroundColor','#4c7fb5');
$('.metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).attr('href'));
}, 2000);
});
You can use the this keyword in the click handler to refer to the clicked element. From that you can retrieve the href attribute:
$('.tile').on('click', function(e) {
e.preventDefault();
$(".tile").addClass("flipOutX");
setTimeout(function() {
$('.metro .tile-area-darkCrimson, .metro .tile-area .user-id').css('backgroundColor','#4c7fb5');
$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load($(this).prop('href'));
}, 2000);
});
Related
I wanted to create a modal of sorts to open when a <li> offering additional information about a topic is clicked. I created a popUpTrigger that responds to a user "click" and then gathers the provided section (and all tags nested inside) and moves it to the popUp div that then appears on the page. I've taken necessary precaution in case the section is empty in which an alert will sound. However, the alert still fires when a section is not empty (it has text and contains an additional anchor tag). I'm not sure why this is happening.
When I console log, I see the nested anchor tag is being viewed by the browser as a separate entity to the section. I've tried nesting the anchor tag further within a div element and rewriting the javascript so the html of the nested anchor tag will be evaluated accordingly as part of the section but all to no avail. This backfiring only occurs when an additional anchor tag is included in the section element of the HTML.
HTML
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</a>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
JavaScript
$('a.popUpTrigger').on('click', function() {
$(this).addClass('selected');
if ($('.selected')) {
let messageArea = $('.selected > section.hide');
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
I removed the children from your anchor, and instead used NEXT. Also your if statement was not needed. I left .selected in the code just in case you wanted to style the anchor when clicked.
$('a.popUpTrigger').on('click', function() {
$('a.popUpTrigger').removeClass("selected");
$(this).addClass('selected');
let messageArea = $(this).next("section");
let strippedMessage = messageArea.text().replace(/(\r\n|\n|\r)/gm, "").replace(/\s/g, "");
let fullMessage = messageArea.html();
if (strippedMessage === "") {
alert("Sorry that page isn't available right now.");
$(this).removeClass('selected');
} else {
$('.popUp').css('display', 'block');
$('.popUp #moreInfo').html(fullMessage);
}
$('.popUp #popUpClose').on('click', function() {
$('.popUpTrigger').removeClass('selected');
$('.popUp').css('display', 'none');
});
});
.selected{color:red;}
.hide{display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="card">
<a class="popUpTrigger" href="#">
Get a Library Card </a>
<section class="hide">
<h6> How to Obtain a Library Card:</h6>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<p> Additional Info </p>
<a href="https://docs.wixstatic.com/ugd/858998_1fae2b5d06fa41a3ba3fcb493b349d19.pdf">
<img src="imgs/LibraryCardVector.png" alt="library card">
</a>
</section>
</li>
<div class="popUp">
<div>
<div id="popUpClose"> <button type="button" class="btn">X</button></div>
</div>
<div id="moreInfo">
<!--WILL BE FILLED IN WITH <section class="hide"> DATA ABOVE-->
</div>
</div>
You have the following code
<a href="#">
</a>
It is not valid to have nested anchors in HTML. So the browser breaks it up when it renders. That is why you are seeing it act weird.
You will need to stick the pop up code outside of the element.
<a class="popUpTrigger" href="#">
Get a Library Card
</a>
<section class="hide">
<p>Foo</p>
Bar
</section>
and reference it with next()
$(".popUpTrigger").on("click", function (e) {
e.preventDefault();
var anchor = $(this);
anchor.next('section').toggleClass("hide");
});
I've got a couple of divs to scroll between. I need to set the one in active view (after a link was clicked) to 'active' and all the other div's should have that class removed.
Using toggle I can't get it to work.
$('.projecten').click(function () {
$('#due').toggleClass('selected'),
$paneTarget.stop().scrollTo('#due', 800, {
margin: true,
onAfter: function () {
$("body").animate({
backgroundColor: "#1f8311"
}, 800),projectenfade();
}
}); menuShow(),titleFadeOut();
});
the html
<div id="due" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="otto" class="elements">
<h3 class="resizeme">...</h3>
</div>
<div id="etc" class="elements">
<h3 class="resizeme">...</h3>
</div>
...
<div id="menu">
<p>
<a class="welkom pointme">Welkom</a> <a class="blog pointme">Blog</a> <a class="media pointme">Media</a> <a class="projecten pointme">Projecten</a> <a class="contact pointme">Contact</a>
</p>
</div>
why not just use addClass and removeClass:
$(".selected").removeClass("selected");
$(this).addClass("selected");
to only remove selected from divs use this for the first line:
$("div.selected").removeClass("selected");
I have a question, and I doubt it is possible. the question is as follows:
How can my onclick be executed without the anchor tag being activated?
The onclick will show the disclaimer message.
Sample code:
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...."/>
</div>
<div class="disclaimer-message">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span onclick="this.parentNode.querySelector('div.disclaimer-message').classList.toggle('disclaimer-show');">?</span>
</div>
</div>
</div>
</a>
Thanks in advance :)
I would write a dedicated function to handle your click.
<span onclick="clickHandler">...</span>
See my click handler below. If you want to prevent the default behavior of a javascript event, which in the case of a click event, you could use e.preventDefault() and e.stopPropagation().
function clickHandler(e) {
e.preventDefault()
e.stopPropagation()
}
This will prevent the browser from following it's default behavior which is to follow that link redirect. e.stopPropagation() will stop the event from bubbling up to its parent, which in this case is the anchor element.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="alert('hello');return false">try me</span>
</a>
Note that when using this approach you should always wrap your script in a try catch block because if your code throws an error the parent link will be clicked.
<a href="http://www.websiteurl.com">
<p>Sample text<p><span onclick="try {alert('hello'); } catch(e) {}; return false">try me</span>
</a>
To prevent the anchor link being invoked on click event :
Assign the click listener on the highest parent possible (right after anchor tag)
Prevent the event bubbling up to the anchor by invoking its preventDefault method
var container = document.querySelector('#container');
container.addEventListener('click', function(event) {
event.preventDefault();
var msgBlock = container.querySelector('.disclaimer-message');
msgBlock.classList.toggle('disclaimer-show');
msgBlock.classList.toggle('hide');
});
a {
text-decoration: none;
}
.disclaimer-show {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<a href="websiteurl.com">
<div id="container">
<div class="content-wrapper">
<div class="image">
<img src="...." />
</div>
<div class="disclaimer-message hide">disclaimer text</div>
<div class="text-wrapper">
<p>Sample text</p><span>?</span>
</div>
</div>
</div>
</a>
<a href="websiteurl.com">
<p>Sample text<p>
</a>
<span onclick="this.parentNode.querySelector('div.class-message').classList.toggle('class-show');">try me</span>
Thats the way you should do it as there is no point to hold span tag inside of anchor , "this.parentNode" targets anchor element ,so querySelector won't work unless u got ur div inside of anchor
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
I want to show a div when a user hovers the element. I want that when you hover over div named distinguished the div class prod-desc changes it's opacity to 1.
Please help me and thank you in advantage!
Here's the HTML:
<section id="distinguished" class="four columns"> <a class="dist-img" href="#" alt="" border="0" > <img src="images/e1.png" onClick="window.location='#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"/> </a>
<div class="descContent">
<div class="distinguished-bar"> <a class="categoryMain" href="#Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"></a> <a class="btAdd" href="#" title="ADD"><span class="iconAdd"></span>
<p>ADD</p>
</a> </div>
<div class="infoContent">
<div class="prod-desc ">
<p>Category</p>
<p>Title</p>
<p>Description</p>
</div>
<div class="prod-price">
<div>
<p class="priceTitle">Precio</p>
<span class="priceRegular">$300</span></div>
</div>
<div class="buttonsBox"> <a class="btAddLarge hom2" id="addToCart" href="/Cart/AddToCart">
<p>#this.Message("Add")</p>
</a> </div>
</div>
</div>
</section>
Here's the jQuery:
$('.prod-desc').hover(function () {
$('.prod-desc', this).stop().animate({
"opacity": 1
});
}, function () {
$('.prod-desc', this).stop().animate({
"opacity": 0
});
});
Try using mouseover and mouseleave instead:
$('.prod_desc').mouseover(function() {
$(this).stop().clearQueue().animate({
"opacity": 1
});
$('.prod_desc').mouseleave(function() {
$(this).stop().clearQueue().animate({
"opacity": 0
});
});
});
You can see it in action in this fiddle: http://jsfiddle.net/svNpQ/3/
It's easy, just use in your code:
$('#distinguished').hover(function() {
$('.prod-desc').animate({"opacity": 1});
});
Here is the example: jsFiddle Demo
In your case you must refer to the element by id, which is 'distinguished'. Then you define the action which is hover and inside of the function you specify which element and what to do, in your case '.prod-desc' animate (change css property) to 1.
Remember to set initial css opacity property of .prod-desc to something lower than 1 to see the difference.
Target the element you wish to attach the event handler to, not the element that will have the fading effect :
$('#distinguished').hover(function() {
$('.prod-desc', this).stop().animate({"opacity": 1});
},function() {
$('.prod-desc', this).stop().animate({"opacity": 0});
});
FIDDLE