This is my code which is getting dynamically appended by a plugin
<div class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<a href="javascript:void(0)" title=":unamused:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
</a>
<a href="javascript:void(0)" title=":joy:">
<img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</a>
</div>
</div>
</div>
</div>
The problem is that i need to change .emoji-menu's div property to display:none whenever the img tag inside it gets clicked(please refer the code), I have tried with different selectors but it didn't work.
I think <a href="javascript:void(0)" is causing problem. Please help me on this.
With angular you can use ngClick and ngShow for these things:
<div ng-show="thisEmoji" class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
<div class="emoji-items-wrap1">
<div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
<div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
<span class="label">:unamused:</span>
<img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
<span class="label">:joy:</span>
</div>
</div>
</div>
</div>
The a tag could be replaced with removed as it only ads a title to the element. I seem to rememeber the alt attribute on img does the same.
If your html snippet appends the document dynamically, you should bind the click events of images . Hope this helps
$("body").on("click",".emoji-items img",function(){
$(".emoji-menu").fadeOut();
})
Related
This is my HTML code:
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Jquery code:
$('.vid').mouseenter(function() {
$('.text').css("visibility","visible");
});
Now, what if I want to add another image but with the same code and class? Obviously when I do this, both images will show their overlay text while my mouse is only on 1 image.
So is there anyway to do this without giving every image a different class/id?
You can use the this keyword to reference the .vid element that raised the event. From there you can traverse the DOM to find the child .text element, like this:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility", "visible");
});
.vid {
position: relative;
}
.vid p {
position: absolute;
width: 100%;
top: 10%;
visibility: hidden;
color: #C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Yes, because .text is a selector which needs to be scoped. Try this instead:
$('.vid').mouseenter(function() {
$(this).find('.text').css("visibility","visible");
});
This will add the attribute to the underlying .text element only.
This can help you with multiple divs:
$(function() {
$('.vid').on('mouseenter', function() {
$(this).find('.text').css("visibility","visible");
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-2 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid2">
<p class="text">Text that comes over the image</p>
</div>
<div class="col-lg-3 vid">
<img src="http://img.youtube.com/vi/hYj-XtJXGbs/maxresdefault.jpg" class="img-responsive " data-toggle="modal" data-target="#vid1">
<p class="text">Text that comes over the image</p>
</div>
Hope this helps!
Hi I am using the AngularJs with HTML to have dynamic content.
I am also making use of bootstrap for collapse feature.
I have created question answer page which is similar to Stackoverflow.
When page loads, it shows up the all questions and when I click on any particular question then it expands that question and with answers but answers are again collpased and there is one anchor tag to expand all answers.
My problem is that when I am clicking on answer's anchor tag the answers are showing up for few seconds and again it is collapsing automatically.
Below is my code:
<div style="" class="row ans-txt left-margin-img">
{{ answer.a_list.as.length }} ANSWERS
<a data-target=".demo" data-parent="" data-toggle="collapse">
<img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height: 24px; width: 24px; display: inline; float: right; right: 18px; position: absolute;"></img>
</a>
</div>
<div class="row " style="padding-top:14px;height:auto;" ng-repeat-start="(key, value) in answer.a_list.as">
<div class="col-xs-2 col-sm-1 col-md-1 content-padding2 collapse demo">
<div>
<button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 1)">
<i class="glyphicon glyphicon-chevron-up"></i>
<img src="assets/svg/uparrow.svg" class="img-responsive" style="height:24px;width:24px;"></img>
</button>
</div>
<div><button type="text" class="searchStyle bgStyle btn-txt" disabled>{{ value.raw.netvotes }}</button></div>
<div>
<button type="submit" class="searchStyle bgStyle btn-Style vote-btn-border" ng-click="vote(value.raw, 0)">
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="assets/svg/downarrow_active.svg" class="img-responsive" style="height:24px;width:24px;"></img>
</button>
</div>
</div>
<div class="col-xs-11 col-sm-10 col-md-11 padding-rightPane collapse demo">
<p class="ex2">{{ value.raw.content }}</p>
<p class="bottom-margin14">
<div class="askedBy-txt">
Answered by {{ value.raw.handle ? value.raw.handle : value.raw.email }} on {{ value.raw.created * 1000 | date:'MMMM dd, yyyy'}}
</div>
<img src="assets/svg/tick_icon.svg" style="height:20px;width:20px;" class="img-responsive pull-right" title="Best answer"
ng-if="value.select_text === 'Best answer'"></img>
</p>
</div>
</div>
Try to toogle the class .collapse.in. It toogles the css state of collapse element.
<div class="...collapse..." ng-class="{'in': !isCollapsed}">
</div>
I have link with image in it. This all construction is wraped in some divs. Problem : except image, also is clickable area of div-wrapper. I don't know why it is possible. So i want to prevent this behaviour. Now i can just do this with javascript (return false on div click) and with css (change curson type on div hover).
Can i somehow done this just with css?
Thanks.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
JsFiddle Example
For those who don't know what i'm asking : I want to make clickable area that are limited by sides of image. Now i can click on div that are wrapper of image to be redirected by link.
Since you're using Bootstrap and the img-responsive class makes an image a block element, you need to change that behavior. Block elements take up the full width of their parent container. You can fix that by making the image an inline element:
img.img-responsive {
display:inline;
}
jsFiddle example
Or just don't use the img-responsive class.
pointer-event:none;
Ya, you can do this using CSS :)
pointer-event:none;
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap" class='no-link'>
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
</a><br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
<style>
.no-link{
}
</style>
Based on your jsFiddle example, simply change yor code to:
<div style="white-space: nowrap; width:200px; margin: auto;">
The cause of the "side effect" is because your A TAG is taking all the parent DIV area, thus the DIV itself is taking the whole space of its own Parent, making it appears as if the clickable area is stretching beyond of the A TAG (which is not true).
To prevent such behavior it is always a good practice to limit the size of the container to the size of the clickable element inside it (width AND height, whenever necessary).
Have a good coding day! :)
You should use display: inline-block; and set the width of the containing div.
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
<div style="white-space: nowrap; display: inline-block; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
</a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
just Add same margin and width in div also
--example
<div class="panel-body">
<div id="home-left" class="col-md-6 text-center">
<div style="white-space: nowrap;margin: 0 auto; width: 200px;">
<a href="#">
<img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
<br/>
<h4>Rating Categories</h4>
</div>
</div>
</div>
I'm using Stylehatch's 'Photoset-grid.js' and 'view.js'
It seems to work, aside for this fact: When I click on the right-most image in a multi-image row, it opens the left image.
To see what I mean: http://test-theme-one.tumblr.com/
My rendered HTML looks like this (I went to safari and clicked "inspect element", and copied the html for a photoset post on my test blog) I don't understand how it is setup, I though I had it so an anchor would wrap each image in the photoset?
<div class="photoset-grid" data-layout="3" style="width: 100%;" data-width="500">
<a href="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" class="view" rel="60178651810" title="help">
<div class="photoset-row cols-3" style="clear: left;display: block;overflow: hidden;height: 80px;">
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;">
<img src="http://31.media.tumblr.com/4738e9e1fe4f307b7c7313bcf96766a6/tumblr_msk013TnG61syxzvzo2_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-right: 2.5px;padding-left: 2.5px;">
<img src="http://31.media.tumblr.com/b421d5cbc68a1f63091492cc95cf879e/tumblr_msk013TnG61syxzvzo3_500.jpg" alt="" style="width: 100%;height: auto;margin-top: -84.5px;">
</div>
<div class="photoset-cell" style="float: left;display: block;line-height: 0;box-sizing: border-box;width: 33.3%;padding-left: 2.5px;">
<img src="http://25.media.tumblr.com/2a4e3311cad4a928b49460b9ed6fda1e/tumblr_msk013TnG61syxzvzo1_500.png" alt="" style="width: 100%;height: auto;margin-top: 0px;">
</div>
</div>
</a>
</div>
The problem is that Photoset Grid wasn't really designed for template work. It takes this template:
{block:Photos}
<a href="{PhotoURL-500}" class="view" rel="{PostID}">
<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
</a>
{/block:Photos}
And pulls out all <img> tags and duplicates them--one per image in the row. It results in this HTML:
<a class="view" ... >
<div class="photoset-row cols-3" ...>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
<div class="photoset-cell" ...>
<img ...>
</div>
</div>
</a>
<a class="view" ... ></a>
<a class="view" ... ></a>
Now, view.js is using anchors/links to pop open the lightbox. They are basically capturing the click event for the entire grouping. When, in your template, you attempt to wrap the <img> in an <a>, it is pulling out the <img> tag out of the <a> in the template and appending them to the first <a>.
If you're up on jQuery plugin development, the Photoset-grid code, is pretty clearly bugged around line 113 (_setupColumns).
Long story short, you're not going to be able to use view.js lightbox with the Photoset-grid. Unless some kind soul comes along and fixes the plugin.
I cannot understand how to avoid text overflow like this:
My markup:
<div class="sidebar">
<div class="well">
<span class="folders_icons">
<a id="add_folder" name="add_folder">
<img src= "Images/Browser/add.JPG" title="add folder" /></a>
<a id="remove_folder" name="remove_folder">
<img src="Images/Browser/delete.JPG" title="remove folder" /></a>
<a id="rename_folder" name="rename_folder">
<img src="Images/Browser/rename.JPG" title="rename folder" /></a>
</span>
<h5>My Folders</h5>
<div id="jstree"></div>
</div>
</div>
You can play with the text-overflow css attribute.
#jstree {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
http://www.quirksmode.org/css/textoverflow.html