I have this
<span class="ui-icon ui-icon-info" id="icon" runat="server" ></span>
I dont use onclick but my icon is clickable (maybe because the jquery-ui class...)
I need to disable the onclick completely.
Is there a way to do it?
You can try:
jQuery off() to off the onclick event for specific span.
Use:
jQuery( "span#icon" ).off("click");
Check w3schools tutorial for this
Or, You can try:
jQuery( "span#icon" ).css("cursor","default");
I guess the clicking on the span does not fire any event if not specified, means this is more a design issue
If there is a hand-cursor coming up as soon as you hover you can spcecify this by the cursor attribute in css:
.someclass {
cursor: default
}
Another possibility if there is some event fireing as seen here:
Use CSS to make a span not clickable
<span class='unclickable' onclick='return false;'>description<br></span>
i am new in stackoverflow. i am trying to add my code here but i am failed for that reason i just added picture here with my Html code
and script are
For a clickable span:
html:
<span class="clickable-span">View</span>
css:
.clickable-span {
color: darkcyan;
text-decoration-line: underline;
}
.clickable-span:hover {
cursor: pointer;
}
For a Unclickable span:
html:
<span class="unclickable-span">View</span>
css:
.unclickable-span{
color: cyan;
cursor: default;
}
Related
This question already has answers here:
How do I select an element based on the state of another element in the page with CSS?
(3 answers)
Closed 7 years ago.
I can't quite get my head around this. I have the following construct:
<div class="container">
for n = 0 to ...
Link n
endfor
for each link in ".container"
<div class="poptip"></div>
endfor
</div>
And an example could be:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
Now the hurdle, I am trying to show the .poptip on hover on the anchor tag, and this obviously works fine if there is one link (which is usually the case). In any case where there's >1 link, then the last one will work. Current css (sass style) which doesn't quite work in >1 cases:
.producttooltip {
position: relative;
}
.producttooltip a:hover + div {
display: block;
}
I cannot change the structure of the html, it will always be container > all links followed by all poptips. I can however mark the poptips and anchor tags up with unique identifiers e.g. Link 1<div class="poptip" rel="identifier"></div>, but I can't quite figure out if I in css can create a general selector which goes (pseudo):
a:hover + div[rel=a.rel] {
display: block
}
So my question is, can I get this construct marked up in pure CSS, or do I have to use some JS trickery (which I can, but I would really prefer CSS). Hope one of you guys are more clever than me.
Edit: just gonna clarify - I cannot change the structure of the html. The neatest solution would obviously be to wrap each element with it's equivalent poptip, but my entire conundrum is the fact that I cannot do this.
In your case, you can do this way:
$('a').on('hover', function() {
$('.poptip').eq($(this).index()).show();
}, function() {
$('.poptip:visible').hide();
});
It is tough to do this with CSS alone. But even then, I have provided a CSS solution below. Do have a look if you wanna consider a CSS only solution.
You can do this via CSS itself. Although there are lot of plugins, lets do something like this. First, you need a hovering element, say in this case, a link.
Hover Me!
Next should be the tool tip. We can have a <span> for now and put it inside the link.
Hover Me!<span class="tooltip">Hello, World!</span>
Now comes the real CSS part.
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Snippet
a span {display: none; position: absolute; color: #fff; background: #000; padding: 5px;}
a {position: relative;}
a:hover span {display: block; text-align: center;}
Hover Me!<span class="tooltip">Hello, World!</span>
This is just one of a pure CSS solution. You can see the working fiddle here.
However, there are a lot of plugins, which keep this concept as base and work for hover-cards and tool tips. Some good examples include:
jQuery UI Tooltip
Tipsy
HoverCard
40+ Tooltips Scripts With AJAX, JavaScript & CSS
jQuery solution
You can use mouseenter/mouseleave event in order to show up the desired elements
$('a').on('mouseenter', function() {
var i = $(this).index();
$('.poptip').eq(i).show();
}).on('mouseleave', function() {
$('.poptip').hide();
});
.poptip {
width:100%;
float:left;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">Some content related to link 2 retreived with ajax</div>
<div class="poptip">Some content related to link 3 retreived with ajax</div>
</div>
Using jquery this can be achieved easily, just need to get the index of the current anchor element & display the respective div present at the index location.
HTML CODE:
<div class="container">
Link 1
Link 2
Link 3
<div class="poptip">Some content related to link 1 retreived with ajax</div>
<div class="poptip">...</div>
<div class="poptip">...</div>
</div>
JS CODE:
$(function(){
$('a').on('hover',function(){
var ind = $('a').index(this);
$('.poptip').eq(ind).css('display','block');
});
});
Live Demo # JSFiddle
Here is my code, shortened for ease of access;
HTML
<a onclick="showHideDiv('bio')" target='_self'>
bio
<div id="bio" class="shadowScreen" style="display: none;">
<p class="showBio">
Bio!
</p>
</div>
</a>
Javascript:
var curDiv;
function showHideDiv(id){
if (curDiv!==null){
document.getElementById(curDiv).style.display="none";
}
document.getElementById(id).style.display="inline";
curDiv=id;
}
CSS:
.shadowScreen{
-moz-box-shadow: 0 0 30px 5px;
-webkit-box-shadow: 0 0 30px 5px;
}
.showBio{
background-color: white;
position:fixed;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
When the 'a' element is clicked "showDiv(div)" is supposed to send a function call to JS which alters "display:none;" to "display:inline;". The HTML will now have the 'div' element which has the class "shadowScreen" which darkens the entire screen. I then have a 'p' element which centers a box on the screen and displays "bio!". But, it's not doing that, and I can't figure out why naht. I'm not the greatest with the Netbeans debugger, so I can't tell exactly what it's saying ;-;
If you need further clarification, just ask! I'll be more than happy to help you help me.
You should remove target and add "#" to href param as suggested.
Bio
Regarding your javascript code, try to initialise your curDiv variable with null.
var curDiv = null;
I think its redirecting because of the a tag.
You should replace:
<a onclick="showHideDiv('bio')" target='_self'>
with
<a href="javascript:void(0);" onclick="showHideDiv('bio')" target='_self'>
Firstly, you'll need to give your anchor tag a href attribute to make it valid. I'd suggest using the ID of the div you're toggling - #bio - or simply just #.
Next, you need to prevent the default action of your anchor tag in order to stop it executing the link you used in the href attribute. To do so, you need to add the following line to the end of your JavaScript function:
return false;
If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
I have an anchor tag which has a style with !important, cant remove this !important from the css because its a default style.
I am trying to add my custom style and I should not use the !important. Is there a better way to achieve this with out important.
Here it is what I have tried:
HTML:
<body class="imp" id="Imp">
<a class="anchor" href="#">Change background</a>
</body>
CSS:
a {
background: black !important;
color: white;
}
body .anchor{
background: blue;
}
Fiddle Demo
The only way to override an !important css property is to use !important yourself. No way around it with pure css, unfortunately:
body .anchor{
background: blue !important;
}
Is there some specific reason that you don't want to use it?
If you absolutely must not use an !important markup, an alternative is to "cheat" in a rather ugly way with a wrapper around the <a> content:
<body class="imp" id="Imp">
<a class="anchor" href="#"><span style="background:blue;">Change background</span></a>
</body>
Try this way
<a class="anchor" style=" background: blue!important;" href="#">Change background</a>
In jQuery
$("a.anchor").attr('style', 'background: blue !important;');
DEMO
Try with Jquery
$("a.anchor").attr('style', 'background: blue !important;');
DEMO
I am very new to web scripting. I have to cover up this defect asap that's why I am using patches instead of some permanent fix .
I got a defect that a tab get selected only when the lettering of it get selected.
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0px;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%'>Search</span>
</div>
There is an issue with z-index but fixing that create some further issues. So I got that the div is get selected when span is selected.
So how can I make whole span cover that div.
Update (from comment)
ok i will try to make it more clear to you as you can see there is an onclick event in that div so whenever you should click on that div some thing need to be loaded. but that tab got selected only when mouse cursor is taken over Search ie we can click only when mouse is on lettering
add display:inline-block; to the <span>
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;left:0px;background-color:transparent;width:75px;border:1px solid blue;' >
<span style='text-align:left;width:100%;border:1px solid red;display:inline-block;'>Search</span>
</div>
I have added border:1px solid red; and border:1px solid blue; for reference
Demo: http://jsfiddle.net/dfJFV/
<div id='ErrorDictionarySearch_3' onclick='tab_click("0");' class='tab' style='position:absolute;z-index:15;border:none;left:0;background-color:transparent;width:75px;' >
<span style='position:absolute;text-align:left;width:100%;display:block;'>Search</span>
</div>
add display: block to the <span>