Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.
I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>
I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.
Related
I have two divs side by side within a parent div - the left div will contain text, while the right div will contain an image, and on button click, the right div can expand, or reduce back to its original width.
<style>
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
</style>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
javascript to expand/reduce the div:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$("#button1").attr('value','Expand');
}
});
Right now, when I increase the width of the right div, it slides underneath the left div. But what I want is for the left div to reduce in size accordingly, and take on the remaining width available within the parent, with left and right div remaining side by side.
JSFiddle
My css is weak, and I'm guessing this is something I can do in css, without having to use javascript to resize the left div too. Suggestions appreciated as always.
Your left div just wasn't being updated with the correct size so your container was more than 100%. I've fixed it here:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$(".left").animate({width:"38%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$(".left").animate({width:"60%"});
$("#button1").attr('value','Expand');
}
});
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
not really good myself, but maybe something like http://jsfiddle.net/fd9pos8m/ ? not smooth though
<div style="padding:2px; width:500px; background: #FFFFFF ">
<div class="left" style="float:left; width:50%; background: #ff0000 ">Left Content</div>
<div class="right" style="margin-left:52%; width:38%; background: #000000 ">Right</div>
<div style="clear:both"></div>
<input type="button" id="button1" value="expand">
</div>
<script>
$('#button1').click(function(){
var val = $(this).val();
if(val == 'expand') {
$('.right').animate({width:'60%'});
$(this).val('reduce');
} else {
$('.right').animate({width:'38%'});
$(this).val('expand');
}
});
</script>
Here try this does this work? http://jsfiddle.net/CFNUJ/917/ the #right-bg { is staying to the #left-bg
the first is using just css
How about using css flexbox? You don't have to worry about that .left or .right jumps down when there's no enough space for them, it just handles that situation for you.
Do remember to check the browser support for flexbox though.
I only tweaked the css:
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
display: flex;
}
.left{
width: 60%;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
}
jsfiddle
http://jsfiddle.net/sen3t6vk/74/
I can't seem to find the answer to this; when I google it, all I get are "replace button text".
I want to hover over some text, and have that text replaced with a button. I've tried the fadeIn/fadeOut technique and the Show/Hide technique. However, the button becomes visible, it is in a different space.
Here's my Jquery:
$(document).ready(function(){
$('#hidedsl6').hide();
$('#showdsl6').hover(function(){
$('#hidedsl6').fadeIn();
}, function(e){
e.preventDefault();
$('#hidedsl6').fadeOut();
});
$('#showfttn10').hover(function(){
});
$('#showfttn15').hover(function(){
});
$('#showfttn25').hover(function(){
});
$('#showfttn50').hover(function(){
});
});
My HTML:
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
My CSS:
.DSLLocation {
margin-top: 110px;
}
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline;
}
So if anyone can help me. I don't care if it's with Jquery, or just simple HTML/CSS
Are you simply trying to make some text appear as a button on hover? if so this should work nicely for you:
div {
padding: 10px;
display: inline-block;
transition: all 200ms ease
}
div:hover {
background: red
}
<div>Psuedo button</div>
Or if you want to hide the text and show the button on hover:
.container {
padding: 10px;
display: inline-block;
background: red;
}
button {
display: none;
}
.container:hover button {
display: block;
}
.container:hover .text {
display: none;
}
<div class="container">
<div class="text">Text</div>
<button>Psuedo Button</button>
</div>
You should understand that since you are replacing one element with another they might move due to the different content. Or you can style both elements the same way so that the change is not abrupt.
You could use just CSS for this
.DSL6 {
background-color: #dbdbdb;
width: 300px;
height: 250px;
border-style: solid;
border-width: 1px;
border-color: #D3D3D3;
float: left;
display: inline-block;
}
.DSL6 h3, .DSL6 button{margin:110px 0 0;padding:0;}
.DSL6 h3{display:block;}
.DSL6 button{display:none;}
.DSL6:hover h3{display:none;}
.DSL6:hover button{display:block;}
<div class="DSL6">
<h3 class="DSLLocation" id="showdsl6">DSL 6</h3>
<button class="btn btntruespeed" id="hidedsl6" type="button">Order Now!</button>
</div>
i am using three div tags like this
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
css
#main
{
width:auto;
height:auto;
margin-left:-100px;
}
#content{
width:auto;
height:auto;
border:5px solid blue;
}
#sub
{
width:100%;
height:100%;
border:1px solid red;
}
so i kept everything auto. But even when i resize or change the margin of main parent the last child not adapting to it.
I am not sure what may be the problem. But when i set width and height as 100% in resize or margin change event it seems adapting.
Can anyone help me out in this? And also is there anyway to detect the parent div attribute changes in some event??
JSFIDDLE
Try This
$(document).ready(function() {
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
$('button').click(function() {
$('#main').css('margin-left', '0px');
$('#sub').css({
width: $('#content').width(),
height: $('#content').height()
});
});
});
#main {
width: auto;
height: auto;
margin-left: -100px;
}
#content {
width: auto;
height: auto;
border: 5px solid blue;
}
#sub {
width: 100%;
height: 100%;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
Working Demo
You are setting the width from JS. Try this.
<div id="main">
<div id="content">
<div id='sub'>
Child div
</div>
</div>
</div>
<button>margin0</button>
#main
{
margin-left:-100px;
}
#content{
border:5px solid blue;
}
#sub{
display: block;
border:1px solid red;
}
$(document).ready(function(){
$('#sub').css('height',$('#content').height());
$('button').click(function(){
$('#main').css('margin-left','0px');
});
});
JSFiddle
#you {
background-color: rgba(65,64,61,0.5);
position: absolute;
top: 0px;
right: 200px;
padding: 7px;
border-radius: 0px 0px 3px 3px;
width: 165px;
border: 2px solid #41403d;
}
#exitb {
background: url(http://playneko.co.uk/exit.png);
height: 19px;
width: 19px;
border-radius: 3px;
}
#exitb:hover {
background: url(http://playneko.co.uk/exit_hover.png);
}
Thats my css code andd this is the box I have
<div id="you">
<div style="height: 110px; width: 57px; float: left; overflow: hidden;">
<img src="http://www.habbo.nl/habbo-imaging/avatarimage?figure='.$user['look'].'&direction=3&head_direction=3&action=wav,crr=667&size=m" alt="avatar" class="rotate" align="left">
</div>
<div style="position: absolute; z-index:1">'.$aanwezag.'</div>
<br/>
</td>
<div style="cursor:pointer;position:absolute;top:10px;left:65px;font-size:18px;font-family: Times;">%habboName%</div>
<div style="cursor:pointer;position:absolute;top:30px;left:65px;font-size:18px;font-family: Times;">' . $users->getRankName($user['rank']) . '</div>
<div style="cursor:pointer;position:absolute;top:50px;left:65px;font-size:18px;font-family: Times;"><font color="#FF0040">'. $user['age'] .' Years Old</font></div>
<div style="cursor:pointer;position:absolute;top:70px;left:65px;font-size:18px;font-family: Times;"><font color="#088A4B">'. $user2['AchievementScore'] .' Score</font></div>
<div style="cursor:pointer;position:absolute;top:90px;left:65px;font-size:18px;font-family: Times;"><font color="#01A9DB">'. $user2['Respect'] .' Respects</font></div>
<div style="cursor:pointer;position:absolute;top:81px;left:5px;font-size:20px;font-family: Times;"><img src="%www%/flags/'. $user['country'] .'.png"></div>
</div>
How would I add the exit image on the right of the box to be able to minimize and maximise the box? if you can help it would be greatly appreciated.
For example, you have to wrap a content which should toggle into a separate div and toggle this div instead of whole #you element
<div id="you">
<div id="exitb">-</div>
<div id=content>
...
</div>
</div>
$("#content").slideToggle();
https://jsfiddle.net/Qy6Sj/1602/
I'm not quite sure if this is what you wanted or not. I have moved the #exitb id out of the #you wrapper and positioned it as absolute as well in order to move it into the image. Moreover, I simplified the code a little bit to use just a text, + and -, instead of image icons.
HTML:
<div id="exitb">-</div>
<div id="you">
...
</div>
Javascript:
$("#exitb").click(function () {
if ($(this).html() == "-") {
$(this).html("+");
} else {
$(this).html("-");
}
$("#you").slideToggle();
});
CSS:
#exitb {
text-align: center;
color: #fff;
background-color: red;
height:19px;
width:19px;
border-radius:3px;
cursor: point;
position:absolute;
top:0px;
right:200px;
z-index: 10;
cursor: pointer;
}
JsFiddle.
How to maximize and minimize a div? Can I resize div according to as need?
I think you need something like this
http://jsfiddle.net/miqdad/Qy6Sj/1/
You can view the code in jsfiddle here is the code what I have done created a div with another div inside as title bar and content box
html
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
css
#widnow{
width:400px;
border:solid 1px;
}
#title_bar{
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button{
border:solid 1px;
width: 25px;
height: 23px;
float:right;
cursor:pointer;
}
#box{
height: 250px;
background: #DFDFDF;
}
jquery
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});