Dojo Query need help in selecting the elements in a page - javascript

I have HTML page with following elements
<img src='some link' id='_id_portlet1_1234' > link </img>
<img src='some link' id='_id_portlet2_4567' > link </img>
I has to select all the id elements with a pattern of _id_portlet* with dojo.query. Can you guys help in providing the dojo.query to get list of above id elements. Here the source code is generated by a template file and every time the page is rendered a random number will be appended to the id. I need to select all the elements which are following the pattern of _id_portlet*. Thanks for your help

The very first thing - the <img> has no closing tag, so instead of invalid
<img src="some link" id="_portlet1_1234" class="portlet"> link </img>
you should use
<img src="some link" id="_portlet1_1234" class="portlet" />
And for selecting the images try this
dojo.query('img[id^="_id_portlet"]').style("border", "5px solid red");
DEMO

You should use classes:
<img src="some link" id="portlet1_1234" class="portlet"> link </img>
<img src="some link" id="portlet2_4567" class="portlet"> link </img>
And then I don't know dojo, but in normal javascript you can use
document.getElementsByClassName("portlet");
Adding _id_ at the beggining of the id it's a pleonasm.

Related

Add class inside another element via javascript?

I want to add a class to a class to a specific element, that is in another element via javascript. In my case I have a div with the class "jet-woo-product-thumbnail" inside this div I have a linked image inside an a-tag like this
<div class="jet-woo-product-thumbnail">
<a href="https://example.com" rel="bookmark">
<img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="">
</a>
Now i need to add the class to the hyperlink element like:
<div class="jet-woo-product-thumbnail">
<a href="https://example.com" class="my_class" rel="bookmark">
<img width="300" height="300" src="https://example.com/image.png" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt=""></a>
I tried:
jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');
but this did not work. Is there any error.
It works:
https://stackblitz.com/edit/js-jquery-find-in-a-doc-addclass?file=index.html
You used it in a doc ready function, like this?
$(document).ready(function(){
jQuery('div.jet-woo-product-thumbnail').find('a').addClass('my_class');
});
Make sure you've closed the div tag correctly. In your example code it is not closed:
<div class="jet-woo-product-thumbnail">
...
</div>
Otherwise jquery will not work.

Reducing .parent and .children calls to get to desired parameter

I have an eCommerce page of products with some small thumbnails below. When I mouse moused over a thumbnail I want to swap the different variation image into the product image. I have this working using the code below but I assume this isn't the best way to do this? Can anyone suggest a better way for me to grab the "product-image" src= tag and update it? The number of parent / child calls I've used to set the right data seems excessive.
Thanks in advance. Tim
<script>
$(document).ready(function(){
$('.nSwatchProduct').hover(function(){
var newSource = $(this).attr('data-variation-image');
$(this).parent('._itmspec_listitm').parent('.nColourSwatch').parent('.categoryswatch').parent('.caption').parent('.thumbnail').children('.thumbnail-image').children('.product-image').attr('src', newSource);
});
});
</script>
web page hierarchy
<div class="thumbnail">
<a href="https://www.website.com/productpage" class="thumbnail-image">
<img src="/assets/thumbL/imagename.jpg" itemprop="image" class="product-image" alt="" rel="itm">
</a>
<div class="caption">
<div class="nColourList categoryswatch">
<a class="_itmspec_lnk thumbnail nColourSwatch" href="https://www.website.com/productpage" ref="1_83" data-toggle="tooltip" data-placement="top" title="" data-original-title="Blue">
<div class="_itmspec_listitm" ref="1_83">
<img class="nSwatchProduct" src="/assets/thumb/variationimage.jpg" alt="Blue" data-variation-image="/assets/thumb/variationimage.jpg">
</div>
</a>
Use .closest to select nearest common parent and then .find that element you need
$(this).closest('.thumbnail').find('.thumbnail-image .product-image')

How to make all Images in an HTML String Lazy Load?

Our website stores HTML content for our pages in our database like a CMS.
I am wondering how to force any image within that string to lazy load, but I also want to include a version of the image in case the user does not have javascript enabled.
Is there a way to replace all images in the string as follows:
find: <img src="URL" class="CLASSES" alt="ALT" title="TITLE">
replace: <img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource>
Or, we are using TinyMCE as an HTML editor. Is there a way to save any images in our content as <img data-src="URL" class="CLASSES lazy" alt="ALT" title="TITLE"><nosource><img src="URL" class="CLASSES" alt="ALT" title="TITLE"></nosource>, but show the images from the content as <img src="URL" class="CLASSES" alt="ALT" title="TITLE"> when displayed in the editor?
This article provided by #dev101 did wonders:
https://tehnoblog.org/wordpress-theme-image-lazyload-tutorial-with-adaptive-height-placeholders/

Hide field when click thumbnail using css or js

I need to hide some option when clicking the thumbnail, for the thumbnail HTML code
<div class="editor_thumbnail">
<ul id="side-switcher">
<li class="thumb"><img data-target="0" src="img1" alt="" class="tooltip img_switcher img d_block tooltipstered"></li><li class="thumb"><img data-target="1" src="img2" alt="" class="tooltip img_switcher img d_block tooltipstered"></li></ul>
</div>
for the first field
<div data-target="front" class="front" id="front"><label for="front">FRONT</label><textarea maxlength="100" data-area="front" class="text" data-target="front" id="front" placeholder="front texthere!">Front text!</textarea></div>
second field
<div data-target="back" class="back" id="back"><label for="back">Back</label><textarea maxlength="100" data-area="back" class="text" data-target="back" id="back" placeholder="back text!">Back Text!</textarea></div>
when I click the front thumbnail it will only show front field likewise with the back thumbnail,
I can not change HTML code because the code already in there, I try to use css like tab but still fail, i want to use onclick but the html code not have onclick.
Using Javascript you can add attributes to your HTML elements by using setAttribute():
function addAttributes() {
// Element.setAttribute(name, value);
document.getElementById('myElement').setAttribute('onclick', 'myFunction();');
}
A detailed explanation on setAttribute() can be found on this MDN page.
I also wanted to point out that IDs must be unique - I noticed you used the same ID value for your div tags as well as your textarea tags.

Angular UI Bootstrap Popover w/HTML not functioning

I have the snippet below in my HTML:
<a ng-href="#" popover popover-template="views/popovers/cu.html" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="40">
</a>
Clicking the a tag does not trigger the popover. Popover's in my application work without HTML, but not with.
I've essentially copied the "Popover with Template" section from the docs here: https://angular-ui.github.io/bootstrap/#/popover
But it still does not function as it does in the example above.
What's wrong?
Try this: Assuming that you're not using the script tag, and you're using a separate html file, add an extra single quote in your popover-template. See my example on plunkr. So that should be popover-template="'cu.html'" instead of popover-template="cu.html".
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top" >
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
Edit: Another way to achieve this is using the script tag and having 'text/ng-template' as the type. The id would be the text that you place inside the popover-template. Take a look at this version on plunkr.
So I would look this:
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
<script type="text/ng-template" id="cu.html">
<div>
Hey there!
</div>
</script>

Categories

Resources