In my div, there is name and delete. It appears in my web site like :
1.jpg delete
My html code of div is:
<div id="files1" class="files">
<b class='dataname' >1.jpg</b>
<span class='delimg' >delete</span>
</div>;
And the code of delimg CSS is:
.delimg{
margin-left:20px;
color:#090;
cursor:pointer
}
I want delete to be hidden at first, so I have display:none added in delimg CSS :
.delimg{
margin-left:20px;
color:#090;
cursor:pointer;
display:none
}
So, when I mouser over the name 1.jpg, delete could be appear; When mouse out the name 1.jpg, delete should be disappear. I tried to use hover to realise that:
$(document).ready(function() {
$('.files').hover(function() {
$('.delimg').css("display","block");
});
});
But the delete showed had changed with undering the name 1.jpg not behind the name 1.jpg, like:
1.jpg
delete
Besides I found that when I take my mouse off the name, the delete still exists. I know delimg attribute display has changed to block, so the delete is still there. I had tried mouserover and mouserout method. Delete could be appear when mouseover. But I could not clicked delete, because when I moved mouser to delete, delete would be disappear once mouse out the name at once.
There is no need to use Javascript to accomplish this. You can do it in CSS directly:
.files:hover .delimg{
display: inline-block;
}
Also, the reason that it appears below is because you are using block instead on inline-block. Here is a working example:
.delimg {
margin-left:20px;
color:#090;
cursor:pointer;
display:none
}
.files:hover .delimg {
display: inline-block;
}
<div id="files1" class="files">
<b class='dataname' >1.jpg</b>
<span class='delimg' >delete</span>
</div>
<div id="files2" class="files">
<b class='dataname' >2.jpg</b>
<span class='delimg' >delete</span>
</div>
Try this instead if you want to restore the default display property of the delete span. and used mouseout to apply display:none again.
$(document).ready(function(){
$('.files').mouseover(function(){
$('.delimg').css("display","unset");
});
$('.files').mouseout(function(){
$('.delimg').css("display","none");
});
});
Let me know if It solved your problem.
You have two problems as I understand :
When the mouse hovers out the delete link does not get hidden.
In this case the solution is to use the jquery toggle method in this line in your code :
$('.delimg').css("display","block");
So that the add css property display: block gets toggled back and gets removed so the link could then hide on mouse over out.
Your second problem is the delete link gets under the jpg in a new line.
Soltion here is to use display: inline-block property instead of display: block in you css file and in the event call back method.
However you can do all of this using pure css as the rest of answers implies.
Hope this answers your question.
Related
We are using a .Net web application from a vendor. It has a feature for user to enter JavaScript and CSS for performing some simple UI modification. They are executed when loading the application.
We want to hide a button on the web UI temporary.
In F12 developer tools, we found the id for that button.
We used this CSS script to hide the button and it works.
#ext-gen391 {
display: none !important;}
However, the id is not fixed. It changes with different groups of login users. So that CSS script is not good enough.
I am thinking of using JavaScript but not sure how to start. Can someone help?
Edit:
Thanks everyone for the input. Sorry that I did not mention that other buttons have the id starts with ext-gen too.
It seems to me that the only "unique identity" I can refer to is the button's position.
How to hide that 3rd td element? Take note that the id ext-gen391 is not fixed. It will be different for different groups of login users.
First off that small snippet of CSS you have tries to select the button based on a class not an Id. Which is why it doesn't work.
You could use CSS
[id^=ext-gen] {
display: none !important;
}
or jQuery
$('[id^=ext-gen]').hide();
but, really, the best way if you have control over what gets rendered you should try and add a more unique id/class instead.
You could try using an id matcher like this in the css:
*[id^="ext-gen"] {
}
To select all the HTML elements that ahve an id that starts with ext-gen.
This should work:
td.x-toolbar-cell[id^=ext-gen]{
display: none !important;
}
if only the number changes, see attribute selectors for more info.
try you use css class name to do that.
You could solve it by putting your Open link inside the #show div
JSFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
This solution was used here.
Congratulations #Mathias
I'm trying to make the .wrapper div a clickable link that goes to the a.icon location. Also, when they hover over the .wrapper div the a.icon:hover state actives, not just when you hover over the icon itself.
Any help would be great.
This is what I have so far:
jQuery(document).ready(function($) {
$(".aca-question-container").hover(function() {
$(".icon").trigger("hover");
});
$(".aca-question-container").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
Example: http://jsbin.com/diyewivima/1/edit?html,css,js,output
In HTML5, you can wrap block elements such as your .wrapper div, within anchors. This is a rudimentary version of what I think you're looking for: http://jsbin.com/qegesapore/edit?html,css,js,output
I removed the JS you had there as I'm not sure it's necessary, and obviously some styling will be needing to be tweaked.
There shouldn't be any requirement for JS to achieve this really.
The hover state can still be applied to the icon as per:
.your-anchor:hover .icon {
background: #666;
}
As I commented, you can use jQuery and a class to achieve what you want. Below is the JS: (it must be inside the onload function)
$('div#wrapper').mouseenter(function(){
$('a.icon').addClass('hover');
});
$('div#wrapper').mouseleave(function(){
$('a.icon').removeClass('hover');
});
And, you must not forget, in your CSS you have to replace a.icon:hover with a.icon:hover, a.icon.hover, so that it emulates the hover state when the class is added. Like this:
a.icon:hover, a.icon.hover{
//CSS GOES HERE
}
For the CSS portion- propagating the hover is pretty easy. Just use .wrapper:hover .icon
as the hover effect selector. You can drop .icon:hover, too, since the parent is hovered when the child is hovered.
As for propagating the click down to it... also easy without jQ.
.wrapper:hover .icon{
color:#f00;
}
<div class="wrapper" onclick="this.getElementsByClassName('icon')[0].click()">
icon
testit
</div>
The error generated is the "there's not stackoverflow.com/google.com" error, showing that the link was followed. Slap https:// in front of the href and pull it out of an iframe and you'll be able to fully see it works.
EDIT:
bsod99's fix is cleaner. So long as you can rearrange the DOM and don't need to support ancient relics (pre-HTML5 spec browsers, like Firefox <3.5) (which you probably don't have to do), use his instead.
I've been reading few posts to my problem and still can't find the error I'm doing. Im trying to use a lightbox which also features a transition of its background (and if possible of the box itself). What it does:
OnClick Button -> Background+Lightbox fades in. OnClick X Button -> Background+Lightbox fades out.
But it doesn't work, as I can't see where the problem lies. So, what am I doing wrong?
I've created a jsfiddle session for anyone to "fiddle" with.
JSFIDDLE
Search for this in the HTML(CSS is bascially only for the Lightbox):
<div id="light" class="white_content">This is of the Page is still under Development!</div>
<div id="fade" class="black_overlay">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
<img style="margin-top: 20px; margin-left: 20px; width: 40px;" alt="X Button" src="res/X.png" />
</a>
</div>
You can call on the lightbox per "Products".
First of all, the element can't have display:none. If it is not visible, you wont be able to see the animation, nor the object at all.
In the JSFiddle, the css do not have any .black_over:hover part to describe the colorchange you want. Add something like .black_overlay:hover {color:red;} in the style sheet.
And one last thing: The "color" property will only set the color of the text inside the element. You either have to add some text inside the element, or edit the property to be something like background-color instead :)
On a website (find it by the link) I have links with images in footer (screenshot)
I have found a great glitch effect in a footer icons which I want to use. It chages images randomly if code looks like that:
<footer class="footer text-center">
<a target="_blank" href="http://link1.com"><img src="f2.jpg"></a>
<img src="f3.jpg">
<a target="_blank" href="http://link3.com"><img src="f1.jpg"></a>
<a target="_blank" href="http://link4.com"><img src="f5.jpg"></a>
<a target="_blank" href="http://link5.com"><img src="bc.png"></a>
<img src="mail.jpg">
</footer>
and simple style
.footer img:hover {
display:none;
}
But in that scenario click while hovering on of the image footers gives no result.
I've tried to use javascript:
var a_href
$("footer a").on("mousemove", function() {
a_href = $(this).attr('href');
console.log(a_href);
});
$(document).click(function(){
console.log("!!!!!!!!!!!");
console.log(a_href);
window.open(a_href,'_blank');
});
Idea was to save the last hovered link and then emulate the click on it by clicking any other element. But that method works only if I click anywhere ELSE than a space over the glitchy icons. Same with $('body').click, $('.footer').click.
I've tried to overlay footer with other div on which i'd be putting .click but then display:none on hover doesn't work.
Here is a jsfiddle - http://jsfiddle.net/yssdjr17/1/
What should I do? Thank you.
UPD
If we use something instead of a display:none we loose the cool glitch effect that way. We loved how randomly elements collapsed and that user might click on one of the elements, but never sure on which one. Some sort of a minigame for him.
Is there a way to listen for a mouseclick, in browser, no matter on what element?
Don't use display: none, use visibility: hidden instead. This way the element will still be there, just not visible.
.footer img:hover {
visibility: hidden;
}
JSFiddle demo.
The effect makes it look broken.
You can't fire the click event from anything hidden or not displayed.
Instead try:
<div id="awesomelink" onclick="openawesomewindow('http://link1.com');"></div>
#awesomelink
{
height:60px;
width:60px;
background-image:url('f1.jpg');
}
#awesomelink:hover
{
background-image:url('awesomecrazyanimated.gif');
}
It's how I'd do it and you'll get a more consistant result across different browsers.
Also the menu of icons won't be shortened by one element making savvy surfers afraid to click.
I have a hidden div and I need to to show it smoothly with different CSS styles, all styles may be changed easily except the "display". But this property is crucial, because when it start appearing, it will move other elements on the page differently. It will depends on the "display" property of the appearing element. Either next element will move right, or down.
I have 2 buttons - (show div as block) and (show div as inline block) and it should work, but it is not.
jsfiddle example
Here is another jsfiddle, showing how to change the display property on visible div. I need to change it while the div is hidden and then show it with new display property smoothly with simple ".toggle(500);".
$("#f").hide();
$(".toggle_h").bind("click", function(){
$("#f").hide();
})
$(".toggle_b").bind("click", function(){
$("#f")
.removeClass('i')
.addClass('b')
.toggle(500);
return false;
})
$(".toggle_i").bind("click", function(){
$("#f")
.removeClass('b')
.addClass('i')
.toggle(500);
return false;
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f' >block2 flexible</div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
hide<br>
I think it is impossible.
But there is a way to bypass this bug.
Just wrap the content of the div into another div and toggle the content wrapper, while your original div will stay visible because on the visible div you can change the display option.
here is the jsfiddle
$(".toggle_b").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('i')
.addClass('b')
$("#w").toggle(500);
})
$(".toggle_i").bind("click", function(){
$("#w").hide();
$("#f")
.removeClass('b')
.addClass('i');
$("#w").toggle(500);
})
.b{
display:block;
background:red;
}
.i{
display:inline-block;
background:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="b">block1 block</div>
<div id='f'> <div id='w' > block2 flexible</div> </div>
<div class="i">block3 inline</div>
<br>
show as block<br>
show as inline<br>
The alternative way I found would be changing not "display", but another CSS property to achieve similar effect, use "float: left;".
BUT floated elements can't have vertical-alignment inside them.
With no parameters, $("#f").hide(); will hide the element immediately with no animation. If you want to animate it, add a duration parameter, e.g.
$(".toggle_h").bind("click", function(){
$("#f").hide(500);
})
The display property cannot be transitioned. Using jQuery's show and hide methods are essentially the same as just saying display: block and display: none in CSS, which, as I just mentioned, can't be transitioned. However, a property like opacity or width CAN be transitioned with CSS. You'd want to toggle a class instead of using .show and .hide though, and let CSS do the transitioning.
If you're looking to simply fade in and out using jQuery, you could replace your .hide method with .fadeOut.
Note: I hope this is what you were referring to :)