I want to finish this project I was working on for my mom for Valentine's day.
I want to be able to click an h2 and have it trigger multiple events, for example making the background color green, changing the font size of h2 to something bigger like 50px and changing the font size of h1 to 50px
I've never triggered multiple events at the same time from an onclick event. I'd love assistance to make mom happy.
body {
background-color: lightblue;
}
<html>
<body>
<h1 style="color:purple;
text-align:center;" onclick="this.style.color='yellow'; this.style.fontSize='40px'; document.body.style.backgroundColor='green';">
Happy Valentines Day Mom!
</h1>
<img src="Source/me.jpg" alt="This is Me" width="300" height="300" align="middle">
<p align="center" style="color:white;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='';">
Lots of love and wishes on this day. It is not possible to repay the love that you have given to me. I just can love you, dear mom. Take my lots of love on this Happy Valentine's Day.
</p>
<img src="source/mom.jpg" alt="Mom" width="200" height="200" align="middle">
<h1 style="color:blue;
text-align:center;" onclick="this.innerHTML='Best Mother Ever!';">
I love you so much! - J
</h1>
<br>
<h2 id="joke" align="center" style="color:white;" onmouseover="this.style.textDecoration='line-through';" onmouseout="this.style.textDecoration='';">P.S. I love you more!</h2>
<button type="button" onclick='document.getElementById("joke").innerHTML = "P.S.S. you are the best!"'>Click Me!</button>
</body>
</html>
I think it would be best to work with style using a CSS file.
Create a CSS file and set some classes like:
h2.valentines {
background-color: green;
font-size: 50px;
color: white;
}
Then on the onclick event you can pass a function to add the class to the element you want, just like this:
function addValentineClass() {
const element = document.getElementById('joke');
element.className = "valentines";
}
Related
It was working until I add document.getElementById("frame").src="https://www.youtube.com/embed/"+frm; line
But now even if I delete this part so make code like how it used to be and working fine, it still doesnt work. I have no idea if why it is like this. It might be a little detail which is I am missing now. Any ideas to find what it is ?
Also, I have tried to load <p></p> texts from a XML file but couldn't find a way for this too. It would be nice, if someone could help me to find a right method for this
function bgClicked2 (idJ,pg,frm)
{
var id = document.getElementById("bgMAIN");
id.src="Pics/bgCLICKED2.png";
var id2=document.getElementById("previews");
id2.style.visibility="visible";
document.getElementById("planet").src="Pics/"+idJ+".png";
document.getElementById("frame").src="https://www.youtube.com/embed/"+frm;
}
function bgClicked()
{
var id,prg,frame;
id=document.activeElement.id;
frame=document.activeElement.name;
bgClicked2(id,"j",frame);
alert("ughjnj");
loadXMLDoc();
}
p, li{
font-size:17px;
font-style:normal;
color:#066;
position:relative;
float:right;
word-wrap:break-word;
width:651px;
margin-left:35px;
}
.button{
position:absolute;
margin-left:453px;
margin-top:315px;
z-index:2;
border-radius:50%;
border:none;
size:50px;
width:83px;
height:89px;
opacity:0;
}
<center>
<div class="upper"><img src="Pics/logo.png" width="75%" height="75%"/></div>
<!--//<div><img src="Pics/2_.png" style="right:9px; top:12 position:relative;" /></div>-->
<div class="spaceBoard">
<input type="button" class="button" onclick="bgClicked() " id="sun" name="piuKlpJmjfg"/>
<input type="button" class="world" onclick="j()" id="earth" name="pm7tfLvHmXA">
<img src="Pics/bgMAIN2.png" id="bgMAIN">
<span id="previews" class="previews">
<img src="Pics/sun.png" width="255" height="255" id="planet"/>
<img src="Pics/back.png" width="39" height="39" style="float:right; margin-left:11" id="btnOut"/>
<table style="float:right">
<tr>
<th><p id="paragraph">The sun is a star, a hot ball of glowing gases at the heart of our solar system. Its influence extends far beyond the orbits of distant Neptune and Pluto. Without the sun's intense energy and heat, there would be no life on Earth. And though it is special to us, there are billions of stars like our sun scattered across the Milky Way galaxy. If the sun were as tall as a typical front door, the Earth would be the size of a U.S. nickel. The temperature at the sun's core is about 27 million degrees Fahrenheit. Average diameter: 864,000 miles, about 109 times the size of the Earth.Rotation period at equator: About 27 days. Rotation period at poles: About 36 days. Surface temperature: 10,000 degrees Fahrenheit.Composition: Hydrogen, helium.</p></th>
</tr>
<tr>
<th><iframe id="frame" width="651" height="405" src="https://www.youtube.com/embed/piuKlpJmjfg" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe></th>
</tr>
</table>
</span>
</div>
This looks like a browser cache issue. Try opening in incognito(private) mode or hard refresh using “Ctrl + F5”
Icon needs to display a message when you mouse over and the message becomes hidden when you mouse out. Plain javascript please
<img src="helpicon.png" width=50 height=50 onmouseover="mytoolTip('Click a form field to see its requirements.');" onmouseout="mytoolTip('');" />
function mytoolTip(ValueToDisplay)
{
document.getElementById("helpicon").innerHTML = ValueToDisplay;
}
You can always use the HTML5 title attribute. e.g.
#myBigFatDiv {
padding: 100px;
background-color: #DDD;
cursor: pointer;
text-align: center;
}
<div id="myBigFatDiv" title="Hell Yea it is!">Hover over me to find out if this is a great answer</div>
There is no element with id helpicon in your html. Try adding an element with the id and give it a shot!
Something like:
<img src="helpicon.png" width="50" height="50" onmouseover="mytoolTip('Click a form field to see its requirements.')" onmouseout="mytoolTip('')">
<p id="helpicon"></p>
<div id="z1" onclick="document.getElementById('q1').style.display=''; document.getElementById('z1').style.display='none';" style="border:solid 1px; background- color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none'; document.getElementById('z1').style.display='';" style="display:none; border:solid 1px; background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment- form.jpg"></img></div>
The above script is what I planned on using to create a spoiler. Basically, when the user clicks on the z1 element, it hides itself and shows the q1 element, and vice-versa. It works on all browsers besides IE. Linking Jquery would be a small liability.
I think this is what you're looking for. You're missing to add display: block
Change this
document.getElementById('z1').style.display='';
to
document.getElementById('z1').style.display='block';
You should think about cleaning your code.
HTML:
<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()">
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>
JS:
function aa() {
document.getElementById('q1').style.display = 'block';
document.getElementById('z1').style.display = 'none';
}
function bb() {
document.getElementById('q1').style.display = 'none';
document.getElementById('z1').style.display = 'block';
}
Working JSfiddle
So I have the following code.
<script src="http://jamesleist.com/wp-content/uploads/2013/01/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('.me').hide();
$('.clickme').click(function() {
$(this).next('.me').animate({
height: 'toggle'
}, 500);
});
});
</script>
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
<div class="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">
Click here to toggle me in and out =)
</div>
<img class="me" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" class="alignnone size-full wp-image-552" style="border: none;" />
It works fine when running on its own, however when I implement this into the main site it does not work.
You can see where I have tried to implement it at the following URL.
http://jamesleist.com/portfolio
It is really confusing me :-( I am using Wordpress by the way and jQuery is linked to in the header.php file.
I am assuming this is a problem with Wordpress?
Many thanks in advance for your help.
.me is not the next element, the next element is a paragraph containing the image ?
$(document).ready(function() {
$('.me').hide();
$('.clickme').on('click', function() {
$(this).next('p').find('.me').animate({
height: 'toggle'
}, 500);
});
});
Your img tags have two class attributes defined. I'm not sure if this is 100% the cause, but that should definitely be fixed.
Like this:
<img class="me alignnone size-full wp-image-552" src="http://www.randomsnippets.com/wp-content/uploads/2011/04/2.png" alt="It's me....ah!!!" title="Allen Liu" width="100" height="77" style="border: none;" />
Your images have 'class' defined twice, you can't do that. You need to include all your classes including the 'me' class inside one class declaration separated by spaces. A simple run through a validator shows the errors pretty clearly.
I would also consider moving your scripts both internal and external to the bottom of your page so that the dom isn't waiting on them to load. Moving all your inline styles into the stylesheet would be a good idea as well so your code is easier to read and debug.
I want a button with an image in it. I am using this:
<input type="submit" name="submit" src="images/stack.png" />
But it does not show the image. I want the whole button to be the image.
It should be
<input type="image" id="myimage" src="[...]" />
So "image" instead of "submit". It will still be a button which submits on click.
If your image is bigger than the button which is shown; let's say the image is 200x200 pixels; add this to your stylesheet:
#myimage {
height: 200px;
width: 200px;
}
or directly in the button tag:
<input type="image" id="myimage" style="height:200px;width:200px;" src="[...]" />
Note however that resizing the image like this might not yield ideal results; if e.g. your image is much smaller than you want it to be shown, you will see the single pixels; if on the other hand it is much bigger, you are wasting precious bandwidth of your users. So resizing the picture itself to the actual size is preferrable over rescaling via stylesheets!
You can style the button using CSS or use an image-input. Additionally you might use the button element which supports inline content.
<button type="submit"><img src="/path/to/image" alt="Submit"></button>
You can use some inline CSS like this
<input type="submit" name="submit" style="background: url(images/stack.png); width:100px; height:25px;" />
Should do the magic, also you may wanna do a border:none; to get rid of the standard borders.
Use <button> element instead of <input type=button />
you can also try something like this as well
<input type="button" value="text" name="text" onClick="{action}; return false" class="fwm_button">
and CSS class
.fwm_button {
color: white;
font-weight: bold;
background-color: #6699cc;
border: 2px outset;
border-top-color: #aaccff;
border-left-color: #aaccff;
border-right-color: #003366;
border-bottom-color: #003366;
}
An example is given here
This may work for you, try it and see if it works:
<input type="image" src="/library/graphics/cecb2.gif">
<input type= "image" id=" " onclick=" " src=" " />
it works.
<a href="#">
<img src="p.png"></img>
</a>