Develop Reference

Hide div if it will have an image with specific class

I want to hide external div If it will have an image with specific class. For example
<div class="slide">
<img class="hidden" src="">
<div>
<div class="slide">
<img class="shown" src="">
<div>
I want to hide div only that has hidden class.

If you are using jQuery you can do the following:
$(function() {
$(‘.hidden’).parent().hide()
})
The middle line selects the parent of the DOM element and hides it. Wrapping the code within an anonymous function wrapped within the jQuery function delays execution of the code until the DOM is ready to be manipulated.

Javascript variable not acting global

I'm just learning Javascript after starting out in PHP.
I'm trying some basic stuff, but for some reason the below code doesn't act as I expect. I have researched it, and from what I can tell it should work.
<script type="text/javascript">
showIndex=4;
function test(){
showIndex++;
alert(showIndex);
}
</script>
I am calling the script with an image:
<div style="display:inline-block;margin-left:25px;">';
<a href="" onclick="test()" ><img src="_images/next.png" width="100" /> </a>
</div>
It runs fine the first time, but when I hit the button again, it still has the initial variable plus one. (which makes me think it's acting as a local variable...)
It seem so straight forward... what am I doing wrong?

Remove the <a> and have the event on the image, it's refreshing the page. You don't need to have it wrapped in an <a> tag for a onclick event:
<img src="_images/next.png" onclick="test()" width="100" />

The empty link just reloads the page. You can insert # in it:
<div style="display:inline-block;margin-left:25px;">
<a href="#" onclick="test()" >www </a>
</div>
Then everything works as intended.

The empty href attribute on the <a> tag is messing you up. Either remove the href attribute, or change it to # or javascript:void(0)
Alternatively, you can call your method from the href attribute like this
<div style="display:inline-block;margin-left:25px;">';
<a href="javascript:test()" ><img src="_images/next.png" width="100" /> </a>
</div>

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>

on dom ready remove existing html attribute and add mine

My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>

You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element

$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})

Dojo Query need help in selecting the elements in a page

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.