if hover on the button tag, it 'll show the social buttons with spaces.
When I mouse over in the space between two social icons, the follo.w button flickers for a moment We should not show follow button if I move even in between icons.
<div class="visible-lg visible-md">
<button class="btn follow-btn text-center" onmouseover="$(this).hide().next().show();">Follow Benedict on social media</button>
<div class="social-btn text-center" onmouseout="$(this).hide().prev().show();">
<a class="btn" href="https://twitter.com/BenedictEvans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/twitter.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://ben-evans.com/" target="_blank">
<img src="/assets/new_home/influential-images/Icons/blog.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://soundcloud.com/a16z" target="_blank">
<img src="/assets/new_home/influential-images/Icons/soundcloud.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://www.slideshare.net/bge20" target="_blank">
<img src="/assets/new_home/influential-images/Icons/slideshare.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://www.linkedin.com/in/benedictevans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/linkedin.png" width="100%" height="100%"/>
</a>
</div>
</div>
Added the fiddle here:
http://jsfiddle.net/thangadurai1992/g9rasopd/
you could always use css for this. It works by using a wrapper div and having the hover effect on the parent.
img {
height: 30px;
margin: 20px;
}
button {
height: 30px;
margin-top: 20px;
width: 100%;
position: absolute;
}
.wrapper:hover button {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button>Follow Text Here</button>
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
</div>
Note: The margin used on the button and image tags are for demo only, and can be removed without breaking the functionality.
I have placed the css (to keep it clean) directly onto the img and button tags. In order for you to ensure it only applies to this button / these images, you could select them via class:
.social {
height: 30px;
margin:5px;
}
.follow {
height: 30px;
width: 100%;
margin-top:5px;
position: absolute;
}
.wrapper:hover .follow {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button class="follow">Follow Benedict on social media</button>
<img class="social" src="/assets/new_home/influential-images/Icons/twitter.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/blog.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/soundcloud.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/slideshare.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/linkedin.png" />
</div>
You don't need JS on this one.
I just added a container and set an hover.
http://jsfiddle.net/g9rasopd/6/
.social-btn-container:hover .follow-btn{
display: none;
}
.social-btn-container:hover .social-btn{
display: inline-block;
}
Related
I am using bootstrap to add responsive images to my webpage. The problem is that I have several overlapping images which then don’t get rescaled correctly.
Diagram Example
Not sure if I’ve set something up wrong, am missing something or trying to over-reach beyond what bootstrap can do.
This is the test code I’m using, I’ve kept it generic.
HTML:
<div class="col-lg-12" >
<!-- Images inside the container image that are not being rescaled -->
<div class="children_Images">
<img class="img-responsive" id="image_1" src="insideImage_1.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_2" src="insideImage_2.png" alt="" style="left: 0.6em; top: -0.5em"/>
<img class="img-responsive" id="image_3" src="insideImage_3.png" alt="" style="left: 0.6em; top: -0.5em"/>
</div>
</div>
CSS:
.container{
border: 2px solid red;
position: relative; /* Allows children to be placed relative to the panel */
font-size: 10px;
z-index: 0;
height: 100%;
width: 100%;
}
.container img{
max-width:100%;
width: auto;
position: absolute;
border:5px solid green;
}
.children_Images
{
transition: all 1s ease-in-out;
}
.children_Images:hover
{
transform: scale(1.05) translate(4em);
}
I’m just wondering if this is possible with CSS and Bootstrap or should I be doing something with JavaScript that rescales all the children images once the parent image’s size has been altered?
What you should do is this
<div class="container">
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
<div class="col-xs-4">
<img src="" alt="" />
</div>
</div>
And css
.container img {
max-width: 100%;
}
My code looks something like :-
<div id="boxgallery" class="boxgallery" data-effect="effect-3">
<div class="panel"><img src="img/2.jpg" alt="Image 2" />
<button class="button overlay-launcher" id="pop2">
link
</button>
<div id="pop2" class="overlay-background"></div>
<div id="pop2" class="overlay-content">
<button id="pop2" class="overlay-close">Close overlay Window</button>
</div>
</div>
<div class="panel"><img src="img/3.jpg" alt="Image 3" />
<button class="button overlay-launcher" id="pop3">
link
</button>>
<div id="pop3" class="overlay-background"></div>
<div id="pop3" class="overlay-content">
<button id="pop3" class="overlay-close">Close overlay Window</button>
</div>
</div>
<div class="panel"><img src="img/1.jpg" alt="Image 1" />
<button class="button overlay-launcher" id="pop1">
link
</button>>
<div id="pop1" class="overlay-background"></div>
<div id="pop1" class="overlay-content">
<button id="pop1" class="overlay-close">Close overlay Window</button>
</div>
</div>
<div class="panel"><img src="img/4.jpg" alt="Image 4" />
<button class="button overlay-launcher" id="pop4">
link
</button>>
<div id="pop4" class="overlay-background"></div>
<div id="pop4" class="overlay-content">
<button id="pop4" class="overlay-close">Close overlay Window</button>
</div>
</div>
</div>
I was trying :-
$(function() {
$(".overlay-launcher").click(function() {
$(".overlay-content,.overlay-background").toggleClass("active");
});
});
but it would work only if i have only one of those
or if i write the jquery for each one separately
what i want to achieve is if i click on the launcher for the pop1 then the content and background of the 1st overlay should appear
same for the rest
the nearest I found was this Single function to toggle multiple divs inside other divs individually
but it doesn't really solve the problem in my specific case I,
I ahve to toggle the active class based on the class of the element
EDIT:
CSS goes like this:-
.overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
opacity: .50;
z-index: 1000;
}
.overlay-content {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px 0 #222;
display: none;
height: 240px;
left: 50%;
margin: -120px 0 0 -160px;
padding: 10px;
position: absolute;
top: 50%;
width: 320px;
z-index: 1000;
}
.overlay-background .active,
.overlay-content .active {
display: block;
}
Below are the 2 things that needs to be done to make it work
In css,
.overlay-background.active, .overlay-content.active {
display: block;
}
In Javascript,
$(".overlay-launcher").click(function () {
$('.overlay-content,.overlay-background').removeClass("active");
$(this).siblings('.overlay-content,.overlay-background').addClass("active");
});
$('.overlay-close').on('click', function(){
$('.overlay-content,.overlay-background').removeClass("active");
});
Working fiddle https://jsfiddle.net/sachin_puthran/ssmstjvu/7/
You should not have multiple elements in your page with the same id like that. id values should be unique within a particular page.
Also note other syntax errors:
</button>>
</button>>
$(".overlay-launcher,")
For some reason, i can't get this div to be hidden by default. I want the page to be loaded and no divs to be visible until the user clicks one of the 3 links however by default the first div 'newboxes1' is always visible.
the div id id 'newboxes' and the class is telling 'newboxes' to 'display:none' so I can't see why it wouldn't work.
HTML
<div style="background-color: #ffffff; padding: 5px; width: 100px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" ><strong>1</strong> </a>
</div>
<div class="newboxes" id="newboxes1" style="background-color: #ffffff; display: block;padding: 5px; width: 426px; margin-left:6px; background-color:#f4f2f2;">
<img src="" width="241" height="36">
<p class="intro">title</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="" width="200" height="31"><br>
</div>
<div style="background-color: #ffffff; padding: 5px; width: 240px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" ><strong>2</strong> </a>
</div>
<div class="newboxes" id="newboxes3" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
<img src="" width="241" height="36">
<p class="intro">title 2</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="" width="200" height="31"><br>
</div>
<div style="background-color: #ffffff; padding: 5px; width: 100px;">
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" ><strong>3</strong> </a>
</div>
<div class="newboxes" id="newboxes4" style="background-color: #ffffff; display: none;padding: 5px; width: 426px; margin-left:6px;">
<img src="" width="350" height="36">
<p class="intro">test 3</p><br>
<p>text here<br><br>
<img src="" alt="" width="200" height="31" style="float:left;">
<img class="reg_box" src="" alt="cis register" width="200" height="31"> <br>
</div>
JS
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
#newboxes {
display:none;
}
newboxes is a class and in the css must me declared as a class not as an id.
You should start by changing this:
#newboxes {
display:none;
}
into this:
.newboxes {
display:none;
}
You need also to remove display: block; from inline style of newboxes1.
check your css style you are using #newboxes { display:none; }
goes for id, you should use .newboxes { display:none; } since . will get all the classes.
I'm trying to swap an image logo with text on mouse hover.
I have been looking at jquery and css to create this transition, but I haven't been lucky with finding a solution. Hopefully you can help me out a bit.
This is what I'm stuck with.
Example
http://jsfiddle.net/VugzA/
HTML
<div id="logo">
<ul>
<li>
<a href="#home" title="Back to Home?">
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</li>
</ul>
</div>
CSS
#logo ul {
list-style: none;
margin-left: -20px;
}
.logo_icon {
display: block;
}
.logo_icon:hover {
display: none;
}
.text {
display: none;
}
.logo_icon:hover + .text {
display: block
}
Here is an update to your fiddle
Updated html:
<div id="logo">
<a href="#home" title="Back to Home?">
<span class="logo_icon">
<img src="some.gif" alt="Logo image" width="45" height="55" />
</span>
<span class="text">Some Text</span>
</a>
</div>
and updated css:
.logo_icon {
display: block;
}
.text {
display: none;
}
#logo a:hover .logo_icon
{
display:none;
}
#logo a:hover .text
{
display:block;
}
What i do here is tie the hover event on the link instead of like you did (hover on image and text), and the image and text span are children of that element. So, when you hover on the link, the specific styles apply.
I've positioned the header of my page to be always at the top by using
position:fixed;
This works perfectly fine, but not on Chrome on my android devices. The header get's pushed away by something and is placed where it shouldn't be: a few 100 pixels from the top instead of 0 pixels from the top.
My guess is that it's caused because of some javascript i'm using. The first piece of javascript is when a user presses an icon a menu shows up, this is the code:
<script type="text/javascript">
$(document).ready(function() {
$('#toggle').click(function(){
$('div.showhide').toggle();
});
});
</script>
The second code is when a user scrolls away from the header the header closes:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(window).scroll(function() { $('.showhide').fadeOut("fast");
});
});//]]>
</script>
This is my page code:
<div class="showhide">
<div class="menubg">
<div class="menu">
<div class="container">
<div class="item">
<div class="img">
<a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;" src="img/conversations.png" alt="conversations" />
</div>
<p>Gesprekken</a></p>
</div>
<div class="item">
<div class="img">
<a href="home.cfm" style="color: white; text-decoration: none;"> <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
</div>
<p>Vrienden</a></p>
</div>
<div class="item">
<div class="img">
<a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
</div>
<p>Ik</a></p>
</div>
<div class="clear"></div>
<div class="item">
<div class="img">
<img src="img/HC.gif" alt="reception" />
</div>
<p>Receptie</p>
</div>
<div class="item">
<div class="img">
<a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
</div>
<p>Instellingen</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="headbg">
<div class="header">
<a href="#">
<img src="img/conversations.png" alt="conversations" class="nav left" />
</a>
<a href="#">
<img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
</a>
<a href="#">
<img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
</a>
</div>
</div>
<div class="content">
</div>
// Page continues after this but it isn't causing the problem
Forgot to add it, but this is my css code:
.menubg {
width: 100%;
background-color: #201d19;
}
.menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
}
.showhide {
display: none;
}
.container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
}
// This is not all the css, if it's needed i'll add it
If anyone could help me out with this problem i would appreciate it!
I've created a sample fiddle with header and content div.
#header
{
position:fixed;
...
top:0;
left:0;
}
#content
{
margin-top:set your header height;
}