Hi: I'm doing a site in wordpress and I need two pieces of code that keep giving me hard time. I know is easy but I can't make it work.
I need to make that when mouse over (or enter) on any of three image, the image change (slide) into another image with descriptive text. How can I include the images onto this sample code and as per image on link bellow?
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj)
{
obj.innerHTML="Thank You"
}
function mOut(obj)
{
obj.innerHTML="Mouse Over Me"
}
</script>
Mouse over change content http://www.nrgtechnologies.com.au/moreimages/plain-2.jpg
Also very similar effect with a horizontal menu with sliding transition between 3 or 4 menu elements on mouseover as per image on link bellow.
mouse over sliding menu and content: http://www.nrgtechnologies.com.au/moreimages/plain-1.jpg
Thanks for the help
Please look at below script:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<style type="text/css">
.slide {
background-image: url(plain-2.jpg);
width: 295px;
height: 220px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-1 {
background-position: -30px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-2 {
background-position: -354px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.slide-3 {
background-position: -675px -215px;
-webkit-transition: background-position .5s ease-in-out;
}
.moz-over {
background-color: #ccc;
}
</style>
</head>
<body>
<div id="images" class="slide slide-1">
</div>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-1</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-2</span>
<span onmouseover="mozOver(this)" onmouseout="mozOut(this)">slide-3</span>
<script type="text/javascript">
var mozOver = function(target) {
target.className = "moz-over";
var images = document.getElementById("images");
images.className = "slide " + target.innerHTML;
};
var mozOut = function(target) {
target.className = "";
};
</script>
</body>
</html>
I am not sure whether is you want. I the logic is like above.
Add an id attribute to your div and remove the javascript handlers:
<div id="description"></div>
Then add your handlers to your images instead:
<img onmouseover="mOver(this)" onmouseout="mOut(this)" ... />
Then in your functions use something like this:
function mOver(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Thank You";
}
function mOut(obj)
{
var description = document.getElementsById("description");
description.innerHTML="Mouse Over Me";
}
Related
I have the following project.
What I want is, when a user clicks on any link on the page, to slowly hide the image with the class map and smoothly display the black background, then return to its usual behaviour, redirecting the user to the next page.
My guess is that preventDefault() is the solution here together with some CSS like this one:
.hideImg{
opacity: 0;
visibility: hidden;
-webkit-transition: visibility 0.3s linear,
opacity 0.3s linear;
-moz-transition: visibility 0.3s linear,
opacity 0.3s linear;
-o-transition: visibility 0.3s linear,
opacity 0.3s linear;
}
body{
background-color:#000;
}
However, I fail to make them work together and create a JS that waits for the hiding animation to occur and then redirect.
How can I achieve this?
Try something like this:
$('a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href');
// For one item
$('.map').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
// Or, for multiple classes - all doing the same thing
$('.map, .another-item, .another-class').animate({"opacity": "0"}, 1000, function() {
window.location.href = href;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Google
<div class='map' style="background: black; width: 300px; height: 300px;"></div>
You can add a class to the container that's holding the image.
And add an additional timeout before you go the new page.
$(".x").on('click', function(e) {
e.preventDefault();
$('div').addClass('darken');
window.setTimeout(function() {
window.location.href = 'https://www.google.com'; // this will navigate to the new page after 2s
}, 2000);
});
body {
background: black;
}
.warpper-map {
width: 500px;
height: 200px;
}
img.map {
width: 100%;
height: 100%;
}
.darken {
opacity: 0;
transition: opacity 2s ease; /* Makes smooth transition */
/* You can increase the time to make the transition much longer */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a class='x' href="#">Click to Darken</a>
<div class='wrapper-map'>
<img class='map' src="https://sporedev.ro/pleiade/images/Lobby.jpg">
</div>
I think this should do the work for you using jQuery:
$('a').on('click',function(e){
e.preventDefault;
$(this).addClass('hideImage');
$('.hideImage').on('animationend webkitAnimationEnd',function(){
window.location.href = $(this).attr('href');
})
});
or just give you the idea of how to fix it.
best of luck
I have a css transform that rotates objects on hover.
.rotate { transition: 0.2s; }
.rotate:hover { transform: rotate(20deg); }
This works perfectly fine when applied to a hard coded HTML element.
However the page contains a script that generates more HTML and inserts it into a div (div.innerHTML = newHTML).
The css transitions do not work on any elements generated by the script.
Why would this be the case and how can it be corrected?
EDIT:
Here is a simplified example that shows my code, however I'm unable to get the example to work at all, the hard coded rotate and the generated html don't rotate and I have no idea why.
<!doctype html>
<head>
<style>
.rotate {
transition: 0.2s;
}
.rotate:hover {
transform: rotate(20deg);
}
</style>
</head>
<body>
<a class="rotate" href="#">A test text</a>
<div id="plot"></div>
<script>
function makeHTML()
{
return '<a class="rotate" href="#">I am a HTML link</a>';
}
var plot = document.getElementById('plot');
var text = makeHTML();
plot.innerHTML = text;
</script>
</body>
</html>
transform only applies to block-level elements. By default, <a> elements have display:inline. So you need to apply display: inline-block;, for the transform to work:
function makeHTML() {
return '<a class="rotate" href="#">I am a HTML link</a>';
}
var plot = document.getElementById('plot'),
text = makeHTML();
plot.innerHTML = text;
.rotate {
transition: 0.2s;
display: inline-block;
}
.rotate:hover {
transform: rotate(20deg);
}
<a class="rotate" href="#">A test text</a>
<div id="plot"></div>
I have a gif that appears as my site is loading however the gif dissapers and the page appears after everything has loaded except the background images called via css.
How could I have the gif fade away only after the background images have loaded.
I am using this code for the loader:
html:
<html class="loading">
<!-- All the things -->
</html>
css:
html {
-webkit-transition: background-color 1s;
transition: background-color 1s;
}
html, body {
/* For the loading indicator to be vertically centered ensure */
/* the html and body elements take up the full viewport */
min-height: 100%;
}
html.loading {
/* Replace #333 with the background-color of your choice */
/* Replace loading.gif with the loading image of your choice */
background: #333 url('loading.gif') no-repeat 50% 50%;
/* Ensures that the transition only runs in one direction */
-webkit-transition: background-color 0;
transition: background-color 0;
}
body {
-webkit-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
}
html.loading body {
/* Make the contents of the body opaque during loading */
opacity: 0;
/* Ensures that the transition only runs in one direction */
-webkit-transition: opacity 0;
transition: opacity 0;
}
javascript
// IE10+
document.getElementsByTagName( "html" )[0].classList.remove( "loading" );
// All browsers
document.getElementsByTagName( "html" )[0].className.replace( /loading/, "" );
// Or with jQuery
$( "html" ).removeClass( "loading" );
Thank you
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.splash').fadeTo(555,0, function() {
$(this).remove();
});
});
</script>
</head>
<body>
<div class="splash" style="position: absolute; width: 100%; height: 100%; background-image:url(mygif); background-repeat: repeat;"> </div>
<!-- All the things -->
</body>
</html>
tested ! => http://jsfiddle.net/3m3S8/
Please see example in chrome. I try to implement row height animation with image that shouldn't exceed parent block.
Why does image width change only after changing any property example?
Try to click the first button, image height will updated, but width no. Then click the second button, opacity will changed, and image width will be setted properly.
<!DOCTYPE html>
<html>
<head>
<title>Image resizing</title>
<style>
.header-row {
width:900px;
height:90px;
margin:0 auto;
background:#0f3a51;
-webkit-transition: all .9s ease;
-moz-transition: all .9s ease;
-ms-transition: all .9s ease;
-o-transition: all .9s ease;
transition: all .9s ease;
}
.header-row img {
display: inline;
max-height: 100%;
background:#ff9900;
}
.header-row-reduced {
height:50px;
}
</style>
</head>
<body>
<div id="hr" class="header-row">
<img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Volkswagen_Logo.png/600px-Volkswagen_Logo.png" alt="">
</div>
<button id="btn" onclick="check();">Update row height</button>
<button id="btn" onclick="changeProp();">Toggle opacity</button>
<script>
var el = document.getElementById('hr'),
img = document.getElementById('img');
function check(){
var classes = el.className.split(' '),
hasClass = classes.indexOf('header-row-reduced');
if(~hasClass) {
classes.splice(hasClass,1);
} else {
classes.push('header-row-reduced');
}
el.className = classes.join(' ');
}
function changeProp() {
img.style.opacity = '0.5';
}
</script>
</body>
</html>
Thats a good question. I don't know why this is not working like expected.
But you could fix it by applying the rule with the height to the element as well:
.header-row-reduced, .header-row-reduced img {
height:50px;
}
This works, but I'm sure it is not exactly what you want to have!
Setting max-height in pixels should fix the issue as well.
Can't figure this out, need another pair of eyes. The footer is dispalyed properly at the bottom of the page. On click, the trace appears in the console. Not animating the transition in any browser. THANKS for looking!!
HTML
<link rel="stylesheet" href="stylesheets/appoverwrite.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/appscripts.js"></script>
<div id="appfooter">....</div>
APPOVERWRITE.CSS
#appfooter {
position:fixed;
width: 100%;
bottom: -350px;
height: 400px;
clear:both;
font-size: 11px;
background: #000;
border-top: 1px dotted #d83800;
z-index: 1000;
transition: bottom 2s;
-moz-transition: bottom 2s;
-webkit-transition: bottom 2s;
-o-transition: bottom 2s;
}
#appfooter .transition {
bottom: 0px;
}
APPSCRIPT.JS
jQuery(document).ready(function($){
$appfooter = $('#appfooter');
show_footer();
});
function is_touch_device() {
return !! ('ontouchstart' in window);
}
function show_footer() {
var open = false;
$appfooter.click(function() {
console.log("show_footer");
if (open == false) {
$appfooter.addClass("transition");
open = true;
} else {
$appfooter.removeClass("transition");
open = false;
}
});
}
Your problem is simple ;). Assuming that you want to show the footer, #appfooter .transition applies to elements which have the transition style that are descendants of the appfooter element. Use #appfooter.transition, or simply .transition instead. (I'm sure you must have just missed this by mistake.)
As a bonus here is some simplified JS for you:
var appfooter = document.getElementById("appfooter");
appfooter.onclick = function () {
appfooter.classList.toggle("transition");
}
See http://jsfiddle.net/MD8HL/