Prevent click on link wrapper using css - javascript

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>

Related

Removing space between columns in html table

I have an HTML table which is as following
Some of the code is below:
<table>
<tr>
<td>
<div style="width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 103px; width:80px;" class="location-block">
<div class="city-img">
<img src="worldwide-location.png" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
<td>
<div style=" width: 4.999999998%;" class="col-md-.6 col-sm-6">
<div style="height: 50px; width:80px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
<div style="height: 50px; width:80px; margin-top: -27px;" class="location-block">
<div class="city-img">
<img src="images/wedding-location/location-1.jpg" class="img-responsive" alt="city">
<div class="overlay-bg"></div>
</div>
<div class="city-dtl text-center">
Read More
</div>
</div>
</div>
</td>
the table looks like the following:
enter image description here
As you can see the white space between each column, I am trying to reduce the white spaces between them, but this is not happening, I have tried padding-left and also gave cell spacing to the table, its not changing, can anyone tell me whats wrong with my code? Thanks in advance.
If you decide to use Bootstrap grid you can avoid to use HTML table tag, and use a structure like this:
<div class="row">
<div class="col margin-col">
<div>Images and content 1</div>
</div>
<div class="col margin-col">
<div>Images and content 2</div>
</div>
</div>
usign a proper CSS rule like this to set padding (inside columns) and margin (outside columns):
.margin-col{
padding: 10px;
margin: 20px;
}

Unable to add vertical scroll bar in html?

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
i am working on news feed module . I have two div's ,in first div (left-side) list of all news title is displayed and on right side div the description and image about that title is shown.But i am not able to add vertical scroll bar on left-side div(title-div),if i apply div then it goes to every particular title only.and second one is when page is load the first title, description will automatically load, so how to do this two things?
Add a wrapper.
The overflow scroll goes to all tittle because the title class is inside ng-repeat and thus is repeated for every individual title.
Add another wrapper div outside ng-repeat and apply overflow scroll to that.
<div class="wrapper">
<div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >
<div class="tittle" style="width: 25%;">
<a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a>
# No title
<hr style="color: red">
</a>
</b>
</div>
<div class="text">
<div style="width: 70% ;float:right; background-color: white;">
<div ng-show="showDiv">
<div style="float: right;">
<img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;">
</div>
<div style="color: purple;text-align: center;font-size:21px">
{{x.title}}
</div><br>
<div>
{{x.text}}
</div>
<b>
URL:-
</b>
To see in details, click here! <br> <br>
</div>
</div>
</div>
</div>
</div><!-- .wrapper -->
And add overflow:scroll to wrapper.
.wrapper {
overflow:scroll;
}
Note that this will create scroll for both title and text combined. Since they are in single wrapper. If you want different then, you will have to create two different wrappers with two different ng-repeat.

Not able to perform any event after image click?

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();
})

Photoset-grid + lighbox opens wrong image on click

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.

Show Hide div with css only

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>
You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/
In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).
this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");

Categories