How would I make this jQuery shorter? I assume there must be a better way of working than this!?
(bare in mind I am new to jQuery)...
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
});
</script>
<script>
jQuery(function() {
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
Any help or directions would be greatt as I am down to the last step on this site and want it finished :)
You could use some extra data attribute and an extra class on your links to make it a little shorter.
So let's say your html looks like this:
<div id="white">white</div>
<div id="v2black">v2black</div>
<div id="v3black">v3black</div>
<div id="firstpagename" class="toggle" data-for="white">toggle white</div>
<div id="secondpagename" class="toggle" data-for="v2black">toggle v2bacl</div>
<div id="thirdpagename" class="toggle" data-for="v3black">toggle v3black</div>
then your jquery can rewritten like this:
jQuery(function() {
$('.toggle').on('click', function() {
var id = $(this).attr('data-for');
$('#' + id).toggle();
});
});
So it looks like we're trying to recreate standard "accordion" behaviour. Depending on the layout of your page, it can be helpful to encapsulate your items if possible. Here is one possible solution to make things that open and close. jsFiddle
<div id="white" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v2black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<div id="v3black" class="panel">
<div class="tab"></div>
<div class="content"></div>
</div>
<script>
jQuery(".tab").on("click", function() {
$(this).closest('.panel').find('.content').toggle();
});
</script>
First we condensed the code into one script tag and one document ready statement, since having it in 3 pieces was only adding bloat.
Then I made sure to chose $ as the parameter for the doc ready callback. jQuery will kindly pass it one argument jQuery so inside our code block we can safely use $ even if outside our code-block it was reserved for other purposes.
Here the .tabs control their .content by traversing up to the nearest .panel and back down. In this way the same behaviour can control all 3.
If however your "tabs" can't be encapsulated like this you can always associate them to the content they are to show/hide in another way. We'll just need to see your html.
<script>
jQuery(function() {
var White = jQuery("#white").hide();
jQuery("#firstpagename").on("click", function() {
White.toggle();
var Black2 = jQuery("#v2black").hide();
jQuery("#secondpagename").on("click", function() {
Black2.toggle();
});
var Black3 = jQuery("#v3black").hide();
jQuery("#thirdpagename").on("click", function() {
Black3.toggle();
});
});
</script>
for the start. If you have many more elements, you might want to loop through a buttonid<>toggleid map:
var map = {
"white": "firstpagename",
"v2black": "secondpagename",
...
};
for (var toggler in map)
makeToggle(toggler, map[toggler]);
function makeToggle(togglerid, pageid) {
var page = $(document.getElementById(pageid)).hide();
$(document.getElementById(togglerid)).click(function() {
page.toggle();
});
}
Related
I have this in the <head> of the parent page:
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
$(this).contents().find($(".TitleBG")).css("background-color", "red");
});
});
</script>
<iframe src="/HomePage.aspx" onload="GetAlerts();" id="innerframe"></iframe>
Then I have an example div in the iframe's .aspx page:
<div class="col-md-12">
<div class="col-md-1 TitleBG">Drive</div>
<div class="col-md-3 TitleBG">Name</div>
<div class="col-md-1 TitleBG">Type</div>
<div class="col-md-1 TitleBG">Format</div>
<div class="col-md-2 TitleBG">Free Space</div>
<div class="col-md-2 TitleBG">Available Space</div>
<div class="col-md-2 TitleBG">Drive Size</div>
</div>
I want to replace the background-color property of the divs that have the class 'TitleBG', but my attempt doesn't seem to be working (above jquery)?
It works when I perform the $(".TitleBG").css("background-color", "red"); on elements within the parent page, though.
Instead of
find($(".TitleBG"))
use
find(".TitleBG")
It looks like this is deprecated:
$('#innerframe').load(function () {
So I have to use this:
$('#innerframe').on('load', function () {
As after 1.8 it's (original code in question) no longer valid
Also:
Instead of
find($(".TitleBG")) use
find(".TitleBG")
As user Wiizl states is another issue.
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
var iFrameDOM = $("iframe#innerframe").contents();
iFrameDOM.find(".TitleBG").css("background-color", "red");
});
});
</script
This will not work for third party iframes however.
You can't alter a iframe page. It would be too easy.
You should consider making AJAX call and create DOM elements : https://api.jquery.com/jquery.ajax/
Try the actual id instead of this and change the find to .find(".TitleBG")
<script type="text/javascript">
$(document).ready(function () {
$('#innerframe').load(function () {
$('#innerframe').contents().find(".TitleBG").css("background-color", "red");
});
});
</script>
currently im having a decent bit of trouble getting my jquery code to work. I'm trying to make the div load in with the correct background image but it doesnt wanna do so. I cant find out what might be wrong since im pretty new to jquery. I have a container set which needs a background image within the html attr 'srcpost' which contains something like
url("movies/Napoleon Dynamite/poster.jpg")
Ill post what I have so far, nothing happens on load. just a blank div with no background image :(.
$( '.video_selection' ).on( 'load', function() {
var backgroundimg = $( this ).attr('srcpost');
$( this ).css('background-image', backgroundimg);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
<p>Napoleon Dynamite</p>
</div>
Please don't use element .onload method: Jquery on() load event on a single element. Might as well use $(document).ready(). Which would render your $(this) targeting window and you must change to element class. Also take care of \ in vidurl.
/*$(window).on( 'load', function() {
var backgroundimg = $('.video_selection').attr('srcpost');
console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
$('.video_selection').css({'background-image': backgroundimg});
}); // window load will wait for all the content (images etc) to load before starting. */
$(document).ready(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
console.log(backgroundimg); // << you can comment or delete this. only for demo purpose
$('.video_selection').css({'background-image': backgroundimg});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("movies/Napoleon Dynamite/poster.jpg")'>
<p>Napoleon Dynamite</p>
</div>
Also if you want to define multiple css value you can add them in {}:
$(document).ready(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
$('.video_selection').css({'background-image': backgroundimg, 'height': '500px'});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://images.pexels.com/photos/45201/kitty-cat-kitten-pet-45201.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500")'>
<p>Napoleon Dynamite</p>
</div>
$(function(){
var backgroundimg = $('.video_selection').attr('srcpost');
$( '.video_selection' ).css('background-image', backgroundimg);
})
.video_selection {
width: 500px;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg")'>
<p>Napoleon Dynamite</p>
</div>
You can do like this for trigger load event for div.
$(function(){
$('div[onload]').trigger('onload');
});
function changebackground(div) {
var backgroundimg = $('.video_selection').attr('srcpost');
//alert(backgroundimg)
$('.video_selection').css('background-image', backgroundimg);
}
$(function(){
$('div[onload]').trigger('onload');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='video_selection' onload="changebackground(this)" vidurl='movies\Napoleon Dynamite\napdyn.mp4' srcpost='url("https://cdn.pixabay.com/photo/2016/04/15/04/02/water-1330252__340.jpg")'>
<p>Napoleon Dynamite</p>
</div>
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.
I am having problems with a jQuery slidedown and slideUp function. When clicking the button the div slides down to reveal more content - however when it slides down it goes half way down smoothly then it likes stutters - but when i click less info to take the div back up it goes up in a smooth transition. How can i make sure it slides down smoothly without no interruptions in the transition?
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
$(".inner p:gt(2)").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner p:gt(2)').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner p:gt(2)').slideUp(1000);
$(this).text("More info");
}
);
});
</script>
HTML/.NET Coding
<div class="slideContent">
<div class="inner">
<energy:TextPod ID="TextPod1" runat="server" CssClass="client-portfolio-intro" />
</div>
</div>
<div class="clear-me"></div>
<div class="btnMoreInfo">
<a class="moreInfoLink" href="javascript:;">More Information</a>
</div>
Not sure if a solution to your problem but just for a good practice, store your selections in variables and use them instead, that way jQuery wouldn't need to find elements every time toggle function is called:
<script type="text/javascript">
$(document).ready(function () {
// $(".image-gallery ul li:gt(5)").hide(0);
var content = $('.inner p:gt(2)'); // storing selection
content.hide(0);
$('a.moreInfoLink').toggle(
function () {
content.slideDown(1000);
$(this).text("Less info");
},
function () {
content.slideUp(1000);
$(this).text("More info");
}
);
});
</script>
The problem is one of performance - browsers can get bogged down when trying to animate multiple elements at a time, particularly if those elements cause the document to be 'reflowed'. Essentially, your selector $('.inner p:gt(2)') is causing all the <p> elements to be animated independently, and each one causes a document reflow at every point.
For a smooth transition, try animating a single containing element that wraps everything you want to be shown/hidden. I would use HTML something like:
<div class="slideContent">
<div class="inner">
<p>Something</p>
<p>Something</p>
<div class="fullInfo">
<p>Something</p>
<p>Something</p>
<p>Something</p>
</div>
</div>
</div>
<div class="btnMoreInfo">
<a class="moreInfoLink">More Information</a>
</div>
And JS like:
$(".inner .fullInfo").hide(0);
$('a.moreInfoLink').toggle(
function () {
$('.inner .fullInfo').slideDown(1000);
$(this).text("Less info");
},
function () {
$('.inner .fullInfo').slideUp(1000);
$(this).text("More info");
}
);
This way, the browser is only animating one element at a time - much faster!