I'm not a developer but i need something like in my website as image is attached. I want images change if you hover on texts.
Is there any plugin available for wp or easy method to create?
Image: (http://prntscr.com/i7kxqf)
EDIT: Sorry, didn't understood your screen shot at the first time
You will need jQuery hover to do this :
$('li').hover(function(){
$('.image').attr('src', $(this).data('img'));
});
img {
max-width: 200px;
}
ul {
position: absolute;
right: 50px;
top: 0;
list-style: none;
}
li {
padding: 20px;
cursor: pointer;
background: blue;
color: white;
margin: 10px;
}
li:hover {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="image" src="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">
<ul>
<li data-img="https://sd-cdn.fr/wp-content/uploads/2016/02/simpsons-live.jpg">Img1</li>
<li data-img="https://vignette.wikia.nocookie.net/simpsons/images/6/63/The_Simpsons_Simpsons_FamilyPicture.png/revision/latest?cb=20101023180303">Img2</li>
<li data-img="http://www.premiere.fr/sites/default/files/styles/premiere_article/public/thumbnails/image/simpson_horror_show.jpg">Img2</li>
</ul>
https://www.w3schools.com/jquery/event_hover.asp
Related
I'm trying to make something like this website where you hover over text shows image in the background.
I've tried everything I've found here but nothing's worked. The closest thing I got it to work was from this answer but the image would show inside a small column minimized where the text is located. I'm open to implementing JS if it's impossible with pure CSS. The code is below but here's my jsfiddle. Help would be greatly appreciated.
HTML
<div class="wrapper">
<div class="menu">
<div class="column">
<ul>
<li><span>column 1</span></li>
<li>filler 1</li>
</ul>
</div>
<div class="column">
<ul>
<li><span>column 2</span></li>
<li>filler 2</li>
<li><a id="preview1" href="#page1">link 1</a></li>
<li><a id="preview2" href="#page2">link 2</a></li>
</ul>
</div>
<div class="preview">
<img id="preview1-show" src="http://via.placeholder.com/1000x500">
<img id="preview2-show" src="http://via.placeholder.com/1000x500">
</div>
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100vh;
padding: 6em;
position: fixed;
}
.menu {
width: 100%;
height: auto;
overflow: hidden;
}
.column {
float: left;
width: 20%;
padding: 1em;
text-align: center;
z-index: 1;
}
.column ul {
margin: 0;
padding: 0;
}
.column li {
position: relative;
display: block;
padding: .3em;
}
.column li span {
font-weight: bolder;
}
.column li a {
display: inline-block;
color: #000;
text-decoration: none;
cursor: pointer;
}
.preview {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
#preview1:hover ~ #preview1-show {
visibility: visible;
}
#preview2:hover ~ #preview2-show {
visibility: visible;
}
I would create on text hover
{
background-image: url("image url");
background-repeat: no-repeat;
background-position: your position;
}
nvm I figured it out.
For anyone interested I removed the css that targeted div id's and visibility:hidden; from .preview and instead added display: none; z-index: -1; to .preview and used this JS code:
$(function(){
$('#preview1').hover(function(){
$('#preview1-show').show();
},function(){
$('#preview1-show').hide();
});
$('#preview2').hover(function(){
$('#preview2-show').show();
},function(){
$('#preview2-show').hide();
});
});
This isn't the perfect solution since I have to target each individual link (I have 13) but it works exactly the way I want.
If anyone has more elegant solution please share.
I am having difficulty removing the white space to the left of my vertical nav bar.
I have tried setting padding-left to 0 on my main-bar.
It's my first time building a nav bar, so if you see something semantically wrong with my codes, do let me know as well.
Thank you!
This is the HTML code.
<title>Mockup of Zopim</title>
<body>
<main>
<nav class = "side-bar">
<ul class ="main-bar">
<li class="user-nav"><a class ="big-box" href="#">User</a></li>
<li class="main-nav">Home</li>
<li class="main-nav">Visitor List</li>
<li class="main-nav">Visualization</li>
<li class="main-nav">History</li>
<li class="divider-nav">Manage</li>
<li class="manage-nav">Agents</li>
<li class="manage-nav">Departments</li>
<li class="manage-nav">Shortcuts</li>
<li class="manage-nav">Banned Visitors</li>
<li class="manage-nav">Triggers</li>
<li class="divider-nav">Settings</li>
<li class="settings-nav">Widgets</li>
<li class="settings-nav">Personal</li>
<li class="settings-nav">Accounts</li>
</ul>
</nav>
<article>
<header>
<h1>Hello!</h1>
</header>
</article>
</main>
</body>
This is the CSS code.
#charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
main {
width: 100%;
}
.side-bar {
width: 15%;
height: 100%;
background-color: #585858;
position: relative;
float: left;
}
nav li {
list-style: none;
}
.main-bar {
padding-left: 0px;
}
.main-bar li a {
display: block;
width: 100%;
height: 100%;
line-height: 2.5em;
text-decoration: none;
color: white;
text-align: center;
}
article {
width: 60%;
height: 30%;
float: right;
position: relative;
}
a.big-box {
display: block;
line-height: 7em;
}
header h1 {
color: white;
}
Here is the JSfiddle link.
http://jsfiddle.net/codermax/fe0L3d08/
Most Web browsers have different default settings for the base margins and padding. So The best way to solve this is to set all the margin and padding
*{
margin:0;
padding:0;
}
or
html,body {
margin:0;
padding:0;
}
Also better if you reset your css then you can use. something like this:
http://necolas.github.io/normalize.css/
You'll want to use a reset.css to resolve different browser quirks.
I've updated your sample and set body margin, and padding to 0.
body {
margin:0;
padding:0;
}
http://jsfiddle.net/fe0L3d08/1/
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
I am trying to create a dropdown menu that when you click it will open up a ul. The thing is I want the "View More" button to always be exactly where it is and the dropdown to open up centered below it.
if you go to the link below you will see what i mean. it opens up exactly like I want it to, but if you close the dropdown by clicking "View More" you will see the header move to the left when i want it to stay exactly where it is
I am building this to be able to be used in many many different locations so "hardcoding" sizes is not an option.
Please help! :)
HTML
<div id="testcontainer">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-340">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-340">
<li>Google</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer2">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-350">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-content-350">
<li>Google</li>
<li>THIS IS A TEST FOR WIDER SHIT</li>
<li>Bing</li>
</ul>
</div>
<div id="testcontainer3">
<a href="javascript:;" class="dropdown-activator" dropdownContent="#dropdown-content-400">
<span>View More!</span>
</a>
<ul class="dropdown-content" id="dropdown-container-400">
<li>GOOOOOOOOOOOOOOOOOOOOOGLEASDASDSASD</li>
<li>Yahoo</li>
<li>Bing</li>
</ul>
</div>
CSS
#testcontainer {
position: absolute;
top: 20px;
left: 100px;
text-align: center;
}
#testcontainer2 {
position: absolute;
top: 20px;
left: 150px;
text-align: center;
}
#testcontainer3 {
position: absolute;
top: 200px;
left: 500px;
text-align: center;
}
.dropdown-activator-active {
background-color: #000;
color: #fff;
}
.dropdown a {
display: inline-block;
}
.dropdown-activator {
display: inline-block;
border: 1px solid black;
padding: 3px;
}
.dropdown-content {
visibility: hidden;
height: 0;
opacity: 0;
position: relative;
text-align: left;
margin: 0 auto;
border: 1px solid black;
}
.dropdown-content-active {
visibility: visible;
height: auto;
opacity: 1;
}
.dropdown-content ul li {
list-style: none;
}
JQuery
$(function(){
$(".dropdown-activator").click(function() {
$this = $(this);
var current = $this.attr('dropdownContent');
if (!$(current).hasClass('dropdown-content-active')) {
$this.addClass("dropdown-activator-active", 100);
$(current).addClass('dropdown-content-active', 100, function() {
$('html').unbind('click');
$('html').not($this).one('click', function() {
$(current).prev().removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100);
});
});
} else {
$this.removeClass("dropdown-activator-active", 100);
$(current).removeClass('dropdown-content-active', 100)
}
});
});
you can see an example of it here www.chrisworrell.com (temporary)
display: none; removes your element from the document flow, which is why your parent div resizes. On the other hand, visibility: hidden; hides your element while keeping it in the document flow.
What you could do is instead of manipulating the display property of your <ul> element, set visibility: hidden; and height: 0; That way the unexpanded link will continue to use the width of the UL element it is bundled with.
It's kind of hacky, but should get the job done.
In order to manipulate visibility instead of display none with jQuery UI, use .animate({opacity: 1}) for fadeIn() and .animate({opacity: 0}) for fadeOut()
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>