Develop Reference

Change the css class when image src is not empty

I have two div and it consist of two different class,when the image source is empty it will have default value.But when the image source change i need to change class properties how to achieve this. Below is my code
<div data-role="view" data-title="Add Photo">
<ul data-role="actionsheet" id="ImagePopUp" data-open="onOpen" data-popup='{"direction": "left"}'>
<li class="km-actionsheet-title"></li>
<li><a data-action="ImagefromGallery">From Gallery</a></li>
<li><a data-action="ImagefromCamera">From Camera </a></li>
</ul>
</div>
<a id="OpenView" data-rel="actionsheet" data-role="button" href="#ImagePopUp" style="text-decoration: none;border:none;">
<img src="images/icon-photo.png" class="icon" />
</a>
<div class="divimage">
<image src="" id="userprofile">
</div>
<div class="divtext">
</div>
CSS
.divimage{
top:2em;
height:30px;
width:100%;
height:100%
}
.divtext{
height:30px;
width:100%;
height:100%
margin-left:5px;
margin-top :2px
}
//replace this class with divimage
.onchangeImageSrc{
some value
}
//replace this class with divtext
.divNewtext{
some value
}

If you don't know from where your image source will change or that code is beyond your control, then you can put a MutationObserver for attribute in image, and in the event if the source is empty / not empty, add your class accordingly
EDIT
since you edited your question, by changing the DOM structure, so if you want to change style in the image, then only css is enough with img[src=""] unlike the earlier case where you want to change the parent div of that image because css doesn't have parent selector so far, so the first part of the answer was addressing that question.

Bootstrap tooltip only on first image

How can I make to show up bootstrap tooltip to every image ? Why is it showing up only on first image like this:
This is my code:
<ul class="row list-unstyled">
#foreach($facilities as $facility)
<div class='col-md-3 text-center'>
<a data-toggle="lightbox" href="/{{$facility->image}}">
<img class="thumbGlassFac" src="http://m-w.lt/prekes/white-magnifying-glass-hi.png">
<img id="images" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"
class="thumbBorderFac" style="height: 180px; width: 180px; line-height: 80px" src="/{{$facility->image}}"/></a>
<hr>
</div> <!-- col-6 / end -->
#endforeach
</ul>
When I hover my mouse to other images the tooltip doesn't showing up.
$('#images').tooltip();

Make sure that your element ids are unique.
<img id="images" />
will generate multiple elements with the same id in the loop, which is invalid. Try to append the loop index to the id and generate unique ids for your elements. So the resulting HTML will be something like
<img id="images1" />
<img id="images2" />
<img id="images3" />
Change
$('#images').tooltip(); // id selector will return only 1 DOM element
to
$(".thumbBorderFac").tooltip(); // class selector returns multiple elements with the same class name
Add an id to the parent element of the images and restrict your selector to run under that element only.
<ul class="row list-unstyled" id="imageContainer">
and change your code to
$("#imageContainer").find(".thumbBorderFac").tooltip();
ID Selector (“#id”)
Class Selector (“.class”)

Because you have the same id for all images. Change the images id to a class.

what about using "class" instead of "id"?
I had a problem similar and solved by using a class as selector.

Change border of last row clicked in a dynamic table (using <ul>)

Here is my fiddle : http://jsfiddle.net/rshutxpj/3/
As you can see, when you click on the rows, there is a little border appearing. I basically want to only have the border change on the last row clicked, but I don't know what event to use to bring the previous row I clicked with no border. What would be the best way to do that?
P.S. I cant use the any type of "losefocus" or similar, because I got many table on my page and the last row clicked on this particular table need to stay visible to the user. Think it the same way as many groups of radiobox.
Here is the code:
<ul class="UploadTable" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
<li style="text-align: center !important">
<label>UPLOAD SCHEDULE</label>
</li>
<li data-role="list-divider">
<div class="ui-grid-b">
<div class="ui-block-a" style="width:33%">Header 1</div>
<div class="ui-block-b" style="width:34%">Header 2</div>
<div class="ui-block-c" style="width:33%">Header 3</div>
</div>
</li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a> </li>
<li id="addedTargetRow" class="fitting">
<a href="#" onclick="this.style.border='2px solid #000099;'">
<div class="ui-grid-b">
<div id="THW_ID" class="ui-block-a" style="width:33%">info1</div>
<div id="POS" class="ui-block-b" style="width:34%">info2</div>
<div id="IP" class="ui-block-c" style="width:33%">Info3</div>
</div> </a>
</li>
</ul>

You have duplicate IDs.
Why do want to have onclick on each anchor.(removed in demo)
Use this JS
$(document).on('click', '.fitting', function () {
$('.fitting').removeAttr('style'); // removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Demo
Warning:As you have only border in style attribute , removing it will not effect anything, Suppose if you have other styles along with border don't use .removeAttr('style'); , Use .css('border', 'none') like below
$(document).on('click', '.fitting', function () {
$('.fitting').css('border', 'none')// removes all previous borders
$(this).css('border', '2px solid #000099')// add border to current element
})
Update :
If there are multiple tables then use this $(this).parents('table').find('.fitting').css('border', 'none')
this finds the fitting elements of the table in which the row is clicked, excluding the same elements in other tables in DOM

NOTE: #J Santosh's answer will toggle all links in all of the tables and the question mentioned that there are multipe tables on the page would all lose their highlighting.
Having your onclick links on the list items will make this messy and is not performant (as I'll go thru below). To stay within The solution you are looking for is:
onclick="var links=this.parentNode.parentNode.querySelectorAll('.fitting a') || [], i = links.length; for (;!!i;i--) { links[i].style.border='none'; } this.style.border='2px solid #000099';"
This will make sure you are only removing the highlighted row from that table.
HOWEVER, There are some very concerning things about this structure.
Your id's are not unique. You should remove the id attributes.
You can use the href=javascript:"/* onclick stuff goes here */" instead of adding an onclick attribute.
There is no need to use anchor tags in the li as you are doing. Adding extra DOM items makes your DOM heavier and the page slower. I suspect you are only adding those because you want the pointer icon. You can fix that with CSS.
Your onclicks will all need to be updated the same way and makes your code less reusable. Adding eventHandlers to every li also is expensive in that the function isn't cached and requires extra resources for each DOM element.
Setting the style purely in javascript might be better done in CSS since it will be tied to your page layout styling. Create a class called "selected" or something similar and add the class onclick.
SO here is how I would code it:
HTML:
REMOVE ALL OF YOUR LINKS! You are using anchor tags wrong! Also, remove all of your id's.
CSS:
li.fitting { cursor: pointer; }
li.fitting.selected { border: 2px solid #000099 }
Javascript:
$(function(){
$('li.fitting').on('click', function() {
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});

You could use the HTML state of :focus and the JS "blur" event, hooked using the HTML attribute onblur. So, you would amend your onclick to this.style.border='2px solid #000099';this.focus(); and add onblur="this.style.border='none';" to that same link.

How to make an HTML class containing links a link?

The image and caption, in class story has two different links. Image points to one location and link to another.
I need to make whole class story into a link.
<div class="story">
<img src="linkforimage">
Caption for image
</div>
I need a solution like this:
<a href="link">
<div class="story">
<img src="linkforimage">
Caption for image
</div>
</a>

Nesting a tags is a bad idea. I would use a delegate here. Have a wrapper a tag and in JS check which source span was clicked.
html
<a href="#" class="story">
<span data-href="link"><img src="linkforimage"/></span>
<span data-href="link2">Caption for image</span>
</a>
js (jquery based)
$('.story').on('click', 'span', function() {
document.location.href= $(this).data('href');
});

You can't have anchor tag inside anchor tag.
You can use onclick method to achieve your goal.
<div onClick="window.open(link);" class="story">
<a> <img src="linkforimage"></a>
<a onClick="window.open(link2); event.stopPropagation();" >Caption for image </a>
</div>
EDIT jsfiddle

Clarifying the problem I am facing right now is that I am using embedly platform, where image comes from . So, I just post with link and image are parsed from the link by embedly. But, that ahref takes user to original web site. Caption takes user to the page with that content on my web site. I need to make of caption to the whole div.
So, I found the answer with CSS,
I just added: style=" pointer-events: none;cursor: default;" on the link with image and style="cursor: pointer;" onclick="window.location='link'" on a class "story" in div.

focus a tags with JS

Did anyone knew how a tags in the browser are indexed?
I have in my html page 12 items wich are created with a tags, the problem is that when I want to focus the first tag with
document.getElementsByTagName("a")[0].focus(); the browser don't focus the first item! and if I just want to focus the third item by document.getElementsByTagName("a")[2].focus(); it focuses the item number 5.
I am wandering why I have this problem since in my page I have only the wanted items to be focused by a tags and the other html items are div and img tags!
Thanks a lot in advance for your help and reply :)
here is an exmaple of 2 items created in my html page:
<div id="carousel_items">
<div id="indicators" class="carousel-indicators" style="visibility: visible;">
<div id="nextBtn" class="right_indicator">
<img id="indicators_right" src="images/nextbtn.gif" style="width:45px;height:25px;">
</div>
</div>
<div id="div_slides" class="thumbnailList_slides">
<div class="div_vid">
<a id="btn0" class="btn_vid" href="#" onclick="javascript:activate('0');"> </a>
</div>
<div class="div_vid">
<a id="btn1" class="btn_vid" href="#" onclick="javascript:activate('1');"> </a>
</div>
</div>

Elements are returned in the order in which they appear in the DOM.
Various things can make that order different to the order you see them when viewing from left-right and top-bottom including:
text direction
float: right
CSS positioning
Flex order