I have a dynamic list with each row containing 6 image icons. Code Below...
<div class='list_body'>
<div class='lister1'>
<img data-icon_no='1' data-job_id='"+job_id+"' data-icon_status='"+split_stats[0]+"' src='"+path+stat1+"' class='q1' />
<img data-icon_no='2' data-job_id='"+job_id+"' data-icon_status='"+split_stats[1]+"' src='"+path+stat2+"' class='q1' />
<img data-icon_no='3' data-job_id='"+job_id+"' data-icon_status='"+split_stats[2]+"' src='"+path+stat3+"' class='q1' />
<img data-icon_no='4' data-job_id='"+job_id+"' data-icon_status='"+split_stats[3]+"' src='"+path+stat4+"' class='q1' />
<img data-icon_no='5' data-job_id='"+job_id+"' data-icon_status='"+split_stats[4]+"' src='"+path+stat5+"' class='q1' />
<img data-icon_no='6' data-job_id='"+job_id+"' data-icon_status='"+split_stats[5]+"' src='"+path+stat6+"' class='q1' />
</div>
<div class='lister'>"+name+"</div>
<div class='lister'>"+time+"</div>
<div class='lister'><a href='javascript:void(0);'>View Appointment & Actions</a>
</div>
</div>
</div>
Each icon has a status number and a different coloured icon image for each status. What I need to do is change the icon when the icon status value changes in the main database.
I am struggling to identify the icon with jquery selectors. I have tried:
$('.q1 img[data-job_id='+job_identifier+']').eq(0).attr('src', path+icon_url1);
(this was to hopefully change the first icon but did not work.)
I basically need to:
a: identify the row of icons based on the job-id
b: reset the icons with the correct img src
c: do this in the quickest way possible.
I hope this makes sense
Write it with double quote -
$('.q1 img[data-job_id="+job_identifier+"]').eq(0).attr('src', path+icon_url1);
use this:
$('.list_body .lister1 img[data-job_id="+job_identifier+"]').attr('src', path+icon_url1);
you dont need eq() as you are filtering using id.
Related
I am using the relativly new HTML attribute loading="lazy". I only want it to be enabled when the number of images rendered on the page excedes 10. I am building my website using Vue.js v3. I am loading the images with a v-for card like this:
<div
class="gallery-panel"
v-for="photo in filteredPhotos"
v-bind:key="photo.id"
:class="`${photo.display}`"
>
<a #click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
<img
loading="auto"
v-bind:src="thumbUrl(photo.filename, album)"
v-bind:alt="`${photo.filename}`"
/>
</a>
</div>
Where filteredPhotos is an array with image information from a JSON file.
Is there a way to change the loading="auto" to loading="lazy" when the number of photos is going to be more than 10?
Well, you can simply add an index attribute to your v-for to check whether the length of your array exceeding 10 or not (Since the index will begin from 0 you should set your condition to > 9). Then you can make your loading attribute conditional like this:
<img :loading="index > 9 ? 'lazy' : 'auto'" />
So your final code should be something like this:
<div class="gallery-panel" v-for="(photo, index) in filteredPhotos" v-bind:key="photo.id" :class="`${photo.display}`">
<a #click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
<img :loading="index > 9 ? 'lazy' : 'auto'" v-bind:src="thumbUrl(photo.filename, album)" v-bind:alt="`${photo.filename}`" />
</a>
</div>
You can use index of v-for e.g
<div
class="gallery-panel"
v-for="(photo, index) in filteredPhotos"
v-bind:key="photo.id"
:class="`${photo.display}`"
>
<a #click="this.$router.push(`/Album/${album}/Photo/${photo.id}`)">
<img
:loading="index > 9 ? 'lazy' : 'auto'"
v-bind:src="thumbUrl(photo.filename, album)"
v-bind:alt="`${photo.filename}`"
/>
</a>
</div>
I have a part in my site that dedicated to changing the language.
Right now, in a circle button, i have united-kingdom flag. This is the default option.
<a class="nav-link-language js-language-trigger">
<img src="http://my-site.test/wp-content/uploads/2018/04/260-united-kingdom.png" alt="">
For example i have an option for German Language
<div class="nav-link-language-holder">
<a><img src="http://my-site.test/wp-content/uploads/2018/04/260-germany.png" alt=""><i>German</i></a>
</div>
How can i set with javscript, when user click on the icon for Germany, it will be replaced for the default option (right now is united-kingdom)
Thanks a lot
Here's a quick way to change your img src :
<img id="Your_IMG_ID" src="olg-img-src.png">
<button onclick="change_img_src()">Change SRC</button>
<script>
function change_img_src() {
document.getElementById("Your_IMG_ID").src = "new-img-src.png";
}
</script>
To generalize what you're looking for and further simplify it, here's a way to do it :
<!--- Your main flag --->
<img id="main-flag" style="cursor:pointer" src="img.png"/>
<!--- Rest of flags --->
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-2.png"/>
<img style="cursor:pointer" onclick="Change_flag(this.src)" src="img-3.png"/>
<!----Other flags---->
<script>
function Change_flag(_src) {
document.getElementById("main-flag").src = _src;
}
</script>
I'm in the process of finding a mobile alternative to Colorbox. Swipebox seemed like a great alternative, but unlike colorbox it doesn't seem to allow every individual image open but combined all of them into a gallery. The conventional way of adding swipebox is as so:
$('.class').swipebox();
which adds everything with that class into a swipebox gallery. Is there a way to instead open each item of a certain class individually?
It looks like you just need to separate your images into "galleries", which may seem counter intuitive as you don't want galleries...
Check the advanced docs for gallery:
You can add a rel attribute to your links to separate your galleries.
Like I said it's counter intuitive, but the feature that's designed to group images together into galleries can be used to separate them. Basically you're setting up galleries of one by adding a different rel attribute to each one.
Working Example on jsFiddle
$('.swipebox').swipebox();
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption" rel="gallery-1">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption" rel="gallery-2">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
If adding a rel attribute to every swipebox looks tedious, you can add the rel attribute with a little script:
$('.swipebox').swipebox();
var X = 0; // set a global var
$('.swipebox').each(function() { //for each swipebox
X += 1; //increment the global var by 1
$(this).attr('rel', 'gallery-' + X); // set the rel attribute to gallery- plus the value of X
});
img {
width: 500px;/* example only */
}
<link href="http://brutaldesign.github.io/swipebox/src/css/swipebox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://brutaldesign.github.io/swipebox/src/js/jquery.swipebox.js"></script>
<a href="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/RopesLittlePlanet.jpg" alt="image" />
</a>
<a href="http://pluggedinwebdesign.com/images/CanopyGround.jpg" class="swipebox" title="My Caption">
<img src="http://pluggedinwebdesign.com/images/CanopyGround.jpg" alt="image" />
</a>
My simple solution :)
<script type="text/javascript">
;( function( $ ) {
$( '.swipebox' ).swipebox();
$( '.swipebox2' ).swipebox();
} )( jQuery );
</script>
<img src="small/1-1.jpg" />
<img src="small/1-2.jpg" />
<img src="small/2-1.jpg" />
<img src="small/2-2.jpg" />
I want Jquery to add a class .pointer to .staff-container if <a href=""> exists within .staff-picture.
My Jquery:
if($('.staff-container').find('.staff-picture').closest('a').length) {
$(this).addClass('pointer');
}
No class is being added with the above jquery, what am I doing wrong?
My Css:
.pointer {
cursor:pointer !important;
}
My HTML:
<div class="teachers">
<div class="span12">
<div class="scroll transparent">
<div class="staff-outer-container">
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/ahmed.png" />
</div>
<p><span class="bold">Mr. Ahmed</span><br />
Ext. 13417<br />
Room 417/323<br />
Ahmed#wcskids.net</p>
</div>
</div>
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/aiello.png" />
</div>
<p><span class="bold">Mr. Aiello</span><br />
Ext. 13328<br />
Room 328/323<br />
ASusan#wcskids.net</p>
</div>
</div>
<div class="staff-container">
<div class="staff">
<div class="staff-picture">
<img src="img/people/teachers/aiosa.png" />
</div>
<p><span class="bold">Mr. Aiosa</span><br />
Ext. 13419<br />
Room 419/323<br />
BAiosa#wcskids.net</p>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this :
$('.staff-picture a').closest('.staff-container').addClass('pointer');
I hope the logic is obvious from the code.
I would first iterate through the .staff-container divs, then use a conditional to determine which ones have an a tag using the this object as context:
//Goes through all the .staff-picture divs
$('.staff-container').each(function(){
//If the a tag exists within the current .staff-picture (returned object isn't undefined)
if($('a', this).html() != undefined){
//Add the class if a exists
$(this).addClass('pointer');
}
});
http://jsfiddle.net/y9ZKG/
EDIT
Sorry, I meant staff-container, not staff-picture. But, either will work.
2nd EDIT
Also, if you are curious why your original methodology wasn't working, it is because the conditional you use (the first if) does not instantiate the this object. That is, this does not exist inside your function.
Try this:
var $selector = $('.staff-container');
if($selector.find('.staff-picture').has('a')) {
$selector.addClass('pointer');
}
$.closest() traverses up not down the tree, therefore you are not finding anything. see the jQuery API
I like to approach these types of problems with "reverse" logic:
$('.staff-picture a').parent().parent().parent().addClass('pointer);
There's probably a way to "choose" your staff-container parent, but if the DOM structure doesn't change, this works great.
This starts by selecting all the a-links and then ONLY applies those up which uses jQuery's powerful selection code. It doesn't rely on tests with if-statements.
I have some HTML that looks like this,
<div class="suit-gallery">
<img src="../images/galleries/business/DSC_0035_sm.jpg" alt="Stylish button 2 business suit with contrast buttonholes light weight high twist cool wool" width="164" height="247" />
<div class="suit-gallery-btn">
Click for more information
</div>
</div>
<div class="suit-gallery">
<img src="../images/galleries/business/DSC_0010_sm.jpg" alt="Classic button 2 business suit with an out ticket pocket. Grey wool Holland & Sherry Perennial" width="164" height="247" />
<div class="suit-gallery-btn">
<a href="../images/galleries/business/DSC_0010.jpg" rel="lightbox[business]" title="Classic button 2 suit with an out ticket pocket. Grey wool Holland & Sherry Perennial from £895, choice of 120 designs/colours" >Click for more information</a>
</div>
</div>
<div class="clear"> </div>
<div class="suit-gallery">
<img src="../images/galleries/business/DSC_0024_sm.jpg" alt="Modern 2 button business suit grey 100% Yorkshire worsted" width="164" height="247" />
<div class="suit-gallery-btn">
<a href="../images/galleries/business/DSC_0024.jpg" rel="lightbox[business]" title="Modern 2 button suit 100% Yorkshire worsted from £795 choice of 85 designs/colours" >Click for more information</a>
</div>
I am wanting to add a sharethis mail link to each instance of .suit-gallery-btn, however I have no idea how do this, I would also like to a title of link of link into the caption option, and also image URL into the image option, below is what I have currently,
jQuery(document).ready(function(){
stWidget.addEntry({
"service":"email",
"element": document.getElementById('button_1'),
"url":"http://sharethis.com",
"title":"What do you think to this suit?",
"type":"large",
"text":"What do you think to this suit?" ,
"image": "",
"summary":""
});
});
I also know that I will have to select the element based on a class and not the id, I need to do this for however many .suit-gallery-btn there are.
I am toally lost.
Try something like this:
$(".suit-gallery-btn").each(function(){
$(this).append("<span class='share-span'></span>"); // ShareThis button will be inserted in this span, which we are appending to each <div class="suit-gallery-btn">
var suitLink = $(this).find('a'); // the "click more information" link. you will need the href and title from this element.
stWidget.addEntry({
"service":"email",
"element": $(this).find('.share-span')[0],
"url":suitLink.attr('href'),
"title":suitLink.attr('title'),
"type":"large",
"text":suitLink.attr('title'),
"image": suitLink.attr('href'),
"summary":suitLink.attr('title')
});
});
Here is a JS fiddle to demonstrate: http://jsfiddle.net/RR26b/
(There are errors from invalid image references, and from lack of a ShareThis Publisher Key, but the concept should work)