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 :)
Related
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.
I want to have the "Kontakt" button in the right cornor at the front. So, this button is supposed to be above everything else. I already set the z-index to z-index: 99999999999 !important; but it doens't effect anything...
On desktop the button is above everything except the footer at the bottom. On mobile its a disaster... Its behind everything... Try yourself..
But why and how can I fix that? - Here the site: https://j-trier.de
Code:
<button onClick="location.href='#kontakt'" type="button" id="kontakt_button" class="cl-popup-trigger type_btn cl-btn">Kontakt</button>
Greetings
just put your button code direct inside of body tag.
You have used Z-index property in right way. But there is a problem in CSS file “us-base.min.css” . On class “l-canvas class” there is a property “overflow: hidden” which is making it invisible. So remove this property. If you want to use it so use it in such way ”overflow-x: hidden; overflow-y: visible;
Happy Coding!
Trying to change the background color when the hyperlink is clicked, but since there is an onclick event it appears that the click default behaviour is taken away so the active style does nothing. Would prefer to do this using CSS.
CSS:
a.myanchor.sunsetred a:active {
background-color: yellow;
}
HTML:
<p>
<a onclick="displayText("Hello world") return false;" href="#" class="myanchor sunsetred">Click to display text</a>
</p>
Any ideas that could help?
I can not see any difference with or without the onclick parameter. (In Chrome) Just to make sure, you know the active state is applied during the click. As soon as you release the mouse button, the state is released. Maybe you mean :focus instead.
Either way, I believe you have a syntax error in your style declaration. You are coloring active links inside other links, which doesn't make sense. You probably mean:
a.myanchor.sunsetred:active {
background-color: yellow;
}
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'm having some trouble positioning the Google +1 button on my website. The div is as follows:
<div class="g-plusone"></div>
The CSS I'm using is pretty simple:
.g-plusone
{
position: absolute;
top:95px;
left:715px;
}
Despite what would seem straightforward, it simple does not want to move.
I know for a fact that the div in question is being accessed. What's strange is that other social sharing buttons, such as the FB like below follow the same syntax and are positioned perfectly.
.fb-like
{
position: absolute;
top:62px;
left:715px;
}
Adding !important to the values does nothing, unfortunately.
Any ideas?
When Google loads +1 button the .g-plusone class seems to disappear, so try to put this DIV inside another DIV, as illustrated below:
HTML:
<div class="google-button">
<div class="g-plusone"></div>
</div>
CSS:
.google-button
{
position: absolute;
top:95px;
left:715px;
}
After page loads, the Google div called g-plusone turns into a lot of code, but, you can manipulate this button with id generated.
In my case, for example, to align the button in the middle of the line I put:
#___plusone_0{
vertical-align: middle !important;
}
Note: The id ___plusone_0 is the id generated by the google codes. Do whatever you want with this id.
Use something like Firebug to ensure you're targeting the correct element. The +1 button is very deeply nested, so you'll most likely need to look further up the DOM tree to get to it's outermost wrapper. You will be able to set the position of that without needing to use !important or anything, so I would definitely check this first.
Sorry, I would have just added this as a comment above but I don't seem to be able :)