I need a simple script that allows me to change the inner html of a p tag which in my case is an image to just plain text when I hover over it.
Example:
<div id="one">
<p><img src="events.png" alt="" /></p>
</div>
When i hover over the above p tag i want it to change to the text as seen below
<div id="one">
<p>Events</p>
</div>
You don't need to use javascript at all for this. This is handled very simply using css.
<div id="one">
<p>
<span>Events</span>
<img src="events.png" alt="" />
</p>
</div>
CSS:
#one p>span{ display:none; }
#one p:hover span{ display:inline; }
#one p:hover img{ display:none; }
Here's a fiddle of it in action: http://jsfiddle.net/CKpCk/
Try the following:
var html = $('#one p').html()
$('#one').hover(function(){
$('p', this).html('Events');
}, function() {
$('p', this).html(html);
})
Demo
Try this one:
<html>
<head>
<title>Try</title>
</head>
<script type="application/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#testHover").hover(function()
{
$("#testHover").html("Events");
});
});
</script>
<body>
<div id="one">
<p style="width:200px;"id="testHover"><img src="events.jpg" alt="" /></p>
</div>
</body>
</html>
Related
I am making a div which would show on button click and hide on clicking again.I am using toggleClass function of jquery. The problem is I need animation while the div opens and closes. I have tried transition:1s, in all relevant classes and even on body, but in vain.
This is the fiddle: http://jsfiddle.net/9dq2p7dw/105/
Here is the code for my jquery:
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggleClass("hide show", 500);
});
});
You can use .fadeToggle
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").fadeToggle( "hide show", "linear" );
});
});
.hide{
display:none;
}
.show{
display:block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
Use transition: all 0.3s ease;
Refer CSS transitions
$(document).ready(function() {
$(".view").click(function() {
$(".view-more").toggleClass("hide show", 500);
});
});
.hide {
opacity: 0;
transition: all 1s ease;
}
.show {
opacity: 1;
transition: all 1s ease;
}
.view-more{
background-color:#F0C798;
padding:10px;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide">
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
JS Fiddle Link
If all you wish to do is hide and show a div upon clicking a button, you can do so in simpler way.
$(".view").click(function(){
$(".view-more").toggle(function() {
$(this).animate({height: '200'});
}, function() {
$(this).animate({height: '100'});
});
});
When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you - you don't have to do that.
jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don't always find the right one when searching the jQuery doc.
try this, You can't animate display, rather try this, may be this will help you
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<style>
.col-md-6{
background:red;
}
</style>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<a class="view">View All</a>
<div class="view-more hide" >
<div class="col-md-6">
<h1>
asasasas
</h1>
</div>
<div class="col-md-6">
<h1>
sasasas
</h1>
</div>
</div>
<script>
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggle(500);
});
});
</script>
</body>
</html>
I would like to change the style of another inside a html element using javascript.
I have used the below code to change the current html element.
<p onmouseover="this.style.color = 'black;">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
I would like to change the other element's style inside the p tag using javascript.
can anyone help?
Using CSS you can achieve the same
<style>
p:hover + h1 {
background-color : red
}
</style>
This should be what you're after (not my work) - check out the fiddle link ...
<html>
<body>
<span id="div1" style="color:black;" onmouseover="stext()" onmouseout="htext()">TEXT1</span><p />
<hr color="black" />
<span id="div2" style="color:red;" onmouseover="htext()" onmouseout="stext()">Text2</span>
</body>
http://jsfiddle.net/FFCFy/16/
for example if you want to change the color:
<script>
document.getElementByTagName("p").style.color = "blue";
</script>
that should probably bound to an event, accordingly to what you want to do
use this :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<p style="color:red;" onmouseover="ch(event)">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
<script>
function ch(e) {
e.target.style.color = "black";
alert();
}
</script>
</body>
</html>
use with Javascript
function change(that){
document.getElementsByTagName('h1')[0].style.color="red";
}
<p onmouseover="change()">This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
use with css
p:hover + h1{
color:red;
}
<p >This text should be changed</p>
<h1>How to change this element when hovered on p element</h1>
jQuery("p").mouseover(function(){
jQuery("h1").css("color", "yellow");
});
You can easily achieve it with jQuery:
$(function() {
$('#a-element').hover(function() {
$('#b-element').css('background-color', 'yellow');
}, function() {
// on mouseout, reset the background colour
$('#b-element').css('background-color', '');
});
});
If #b comes immediately after #a, the simplest solution is in pure css:
#a:hover + #b {
background: #ccc
}
If between #a and #b are other elements, you have to use ~ like this:
#a:hover ~ #b {
background: #ccc
}
I have assigned the 80% height of the viewport to my div as height. In Button click I have displayed the height of the div. This works fine in ie9, ie10. But in ie7, ie8 $("#divContainer").height() is 0. Am I doing anything wrong and how to get the height of the div in IE7, IE8(vml)
<html style="height:100%;">
<body style="height:100%;">
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<button id="button1"></button>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").height());
});
});
</script>
</body>
</html>
Thanks In Advance
For IE you may try pure javascript solution
var height = getElementById("divContainer").clientHeight;
Most importantly include jQuery Library in your Code's head section and use .css("height") instead of .height()
Modified code is as below
<html style="height:100%;">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body style="height:100%;">
<button id="button1" value="text"></button>
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
});
});
</script>
</body>
</html>
Note I have taken Button above the container.
you can use jquery - Height option
or
use jquery with css option of any properties of tag or id.
like
<div id="divContainer" style="height:100%; border:2px solid #ff0000">
</div>
<script type="text/javascript">
$(function () {
$("#button1").click(function()
{
alert($("#divContainer").css("height"));
//also set the height too as
$("#divContainer").css("height", "80%");
});
});
I have a div with id="mybutton" and a hidden div with id="mydiv" like in the code below :
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I want "mydiv" to appear even if mouse is over "mydiv"(after hovering at mybutton).
Write CSS
#mydiv{
display:none;
/* visibility:hidden; */
}
#mybutton:hover + #mydiv,#mydiv:hover{
display:block;
/* visibility:visible; */
}
Demo
You can also use visibility:visible; and visibility:hidden; instead of display property
Give a common parent to them and connect the hover to it.
html:
<div id="parent">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
css:
#mydiv {
display: none;
}
Jq:
$(document).ready(function(){
$("#parent").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
JSfiddle: http://jsfiddle.net/f2W9b/
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
Wrap it inside div:
<div id="container">
<div id="mybutton">Show</div>
<div id="mydiv">Hidden thing..</div>
</div>
And listen for mouseenter event on the container div.
Wrap your button in a container, like so:
<span id="hoverarea">
<div id="mybutton">Show</div>
<div id="mydiv" style="display: none;">Hidden thing..</div>
</span>
<script>
$(document).ready(function(){
$("#hoverarea").hover(function(){
$("#mydiv").fadeIn();
}, function(){
$("#mydiv").fadeOut();
});
});
</script>
http://jsfiddle.net/n4B5b/1/
In the fadeout() portion of your function, can you check if the mouse is currently hovering over the #mydiv div? If so (such as adding a class on hover to the #mydiv), check it and don't fadeout.
<head>
<script>
$(document).ready(function(){
$("#mybutton").hover(function(){
$("#mydiv").fadeIn();
}, function(){
if (!$("#mydiv").hasClass('hovering') {
$("#mydiv").fadeOut();
}
});
$("#mydiv").hover(function(){
$("#mydiv").addClass('hovering');
}, function (){
$("#mydiv").removeClass('hovering');
});
});
</script>
</head>
<body>
<div id="mybutton">Show</div>
<div id="mydiv" style="display:none;">Hidden thing..</div>
</body>
I'm trying to convert a value stored by localStorage and then turn it into a class so I can manipulate it in the DOM.
I'm very new to javascript, so please allow me to explain:
I have a html file with multiple divs, and localStorage stores the class of the div that was last clicked.
I want my script to call the stored class from localStorage, find the div with that class (using jquery OR js, doesn't matter) and then change the background colour of that div using .css(), for example. I'll be able to do what I need to do with that logic, but I can't get it to work.
So what I am trying to do is $('the last clicked div').css({..manipulate the css..});
Is this possible?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//show the div that was last clicked
function currentStatus(){
if (localStorage.getItem("currentDiv") === $(currentClass))
{
$(currentClass).show();
$("b").html(localStorage.getItem("currentDiv"));
}
}
//set a color for the recently clicked div dynamically, not by .click
var highlightClass = localStorage.getItem("currentDiv");
highlightClass.css({
'background' : 'black'
})
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body onLoad="currentStatus()">
<div class="slide1">
<h1>"A question would go here."</h1>
</div>
<div class="slide2">
<h1>"A question would go here."</h1>
</div>
<div class="slide3">
<h1>"A question would go here."</h1>
</div>
<div class="slide4">
<h1>"A question would go here."</h1>
</div>
<div class="slide5">
<h1>"A question would go here."</h1>
</div>
<div class="slide6">
<h1>"A question would go here."</h1>
</div>
<div class="slide7">
<h1>"A question would go here."</h1>
</div>
<b></b>
</body>
</html>
Here's how to make it work, the core thing being: $("."+currentDivClass) which converts the string to a class!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
[class*="slide"]{
display: inline-block;
padding: 40px;
background: #999;
margin: 20px;
}
/*.slide1{
display: block;
}*/
</style>
</head>
<body>
<div class="slide1">
<h1>"1 A question would go here."</h1>
</div>
<div class="slide2">
<h1>"2 A question would go here."</h1>
</div>
<div class="slide3">
<h1>"3 A question would go here."</h1>
</div>
<div class="slide4">
<h1>"4 A question would go here."</h1>
</div>
<div class="slide5">
<h1>"5 A question would go here."</h1>
</div>
<div class="slide6">
<h1>"6 A question would go here."</h1>
</div>
<div class="slide7">
<h1>"7 A question would go here."</h1>
</div>
<b></b>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//always show the current div class
$("b").html(localStorage.getItem("currentDiv"));
//get the class of the div that's just been clicked
$("div").click(function(){
var currentClass = $(this).attr("class");
localStorage.setItem("currentDiv", currentClass);
$("b").html(localStorage.getItem("currentDiv"));
});
//convert the string of the last clicked div into a class and then work your magic
var currentDivClass = localStorage.getItem("currentDiv");
$("."+currentDivClass).css({
'background' : 'red'
});
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>
</body>
</html>