Need help to show "default" picture in the imageHolder when pages is loaded in JavaScript and replaced whit picture from the button click.
<script type="text/javascript">
function changeImg(image) {
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="row">
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<p>
<onload="changeImg('0.jpg')">
</p>
<p id="imageHolder" "changeImg('/upload_dir/pics/Beo/BeoLab/3/BLa3-Black.jpg')"></p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('1.jpg')" style="background-color: #000;" title="sort">·</a>
</p>
<p style="text-align: center; font-size:6px;"><a class="button" onclick="changeImg('2.jpg')" style="background-color: #d2d2d2;" title="sort">·</a>
</p>
</div>
<div class="col-s-4 col-m-12 col-l-12 col-xl-12">
<div class="panel" id="pic" style=" background-color:#fff;">
<img id="imageHolder" / class="responsive">
</div>
</div>
</div>
Related
I have 2 columns with same ID, each have 1 button. How to run a function when one button is clicked without changing other ID values?
Here is my code:
<div class="row">
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
<!--- column 1 ------>
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div id="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div id="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input id="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price();">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
</div>
Here is my function:
<script>
function price(){
var qty = document.getElementById("jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
document.getElementById("hrg").innerHTML = prc;
document.getElementById("per").innerHTML = "/" + qty;
}
</script>
The problem here is that function only runs on 'column 1' & doesn't work on 'column 2'.
Where exactly am I going wrong?
id should be unique in the same document. Use classes or other attributes instead of id.
If you want centralized function to handle clicks, submit the clicked element itself to that function, so it would know which column was clicked:
<div class="column nature">
<div class="content">
<img src="images/pic.jpg" alt="Jane" style="width:100%">
<div class="container">
<p class="title" style="text-align:center;">SCA5-01</p>
<div style="text-align:center;">
<div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div>
<div class="per">/500</div>
</div>
<div style="width:100%;margin:0px 5%;display:block;">
<div style="font-size:2vw;">
<br>Spect :
<br>- New
<br>- Fresh
</div>
</div>
<p>
<div style="width:100%;margin:0px auto;text-align:center;">
<input class="jmlh" type="number" value="500" style="width:50%;">
<button onclick="price(this);">chek</button>
</div>
</p>
<p>
<button class="button">Order</button>
</p>
</div>
</div>
</div>
function price(el){
const elContainer = el.closest(".container");// find parent
var qty = elContainer.querySelector(".jmlh").value;
var prc = Math.ceil((1000000 / qty)/100)*100;
elContainer.querySelector(".hrg").innerHTML = prc;
elContainer.querySelector(".per").innerHTML = "/" + qty;
}
Note, that all id were replaced by class attribute and in javascript instead of searching entire document with document.getElementById() it's now only searching children inside the .container element.
I have two flip cards with a hide/show toggle. but when I click the hide/show button on the second flipcard it doesn't work. How can I make it so that when the hide/show switch on the second flip card is clicked, it starts working. I hope you understand.
this is my flip cards
<div id="main">
<div name="first flip card" style="margin-left: 50px ;padding: ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px ;">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button id='button' >hide/show</button>
<p id="newpost" style="display: none;" > Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
this is my script for hide/show button
<script>
var button = document.getElementById('button');
button.onclick = function() {
var div = document.getElementById('newpost');
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
};
</script>
i hope you can help me
I tried many options, but each had some kind of jamb. For example, I tried other scripts in one, the text was not shown at all, in the second option, when I pressed hide / show on the second flip card, it showed the text on the first flip card.
Welcome to stackoverflow.
According to the W3C Markup Validation Service tool, this document contains a number of errors, including a "Duplicate ID" error. (See: W3C Validator)
Note: The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). (See: HTML id at MDN)
So we need to use a class instead of newpost id to target those elements.
Change the HTML to the following content — by formatting the code and fixing those errors:
<div id="main">
<div style="margin-left: 50px;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
<div style="margin-left: 50px ;">
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px;">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button type="button">hide/show</button>
<p class="newpost" style="display: none;"> Test text</p>
<hr />
</div>
</div>
</div>
</div>
Script:
This script scans the entire DOM for all button elements. Then whenever you click on a button, it first finds the parentElement of that button and then toggles the first element with a newpost class inside the corresponding parentElement.
<script>
document.querySelectorAll('button').forEach((button) => {
button.addEventListener('click', (event) => {
const newpostElement = event.target.parentElement.querySelector('.newpost');
if (newpostElement.style.display !== 'none')
newpostElement.style.display = 'none';
else
newpostElement.style.display = 'block';
})
});
</script>
Learn about HTML errors:
Invalid use of name attribute for div element
Invalid use of padding: ;
Element div not allowed as child of element label
The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant.
Duplicate ID button.
According to your Question , What I Understand you want something like this:=
$("h1").on("click", function(){
console.log($(this).children("div"));
$(this).siblings("div.content").slideToggle();
});
.content{
display:none;
margin: 10px;
}
h1{
font-size: 16px;
font-wieght: bold;
color: gray;
border: 1px solid black;
background: #eee;
padding: 5px;
}
h1:hover{
cursor: pointer;
color: black;
}
<div class="article">
<h1>TITLE 1</h1>
<div class="content">content 1</div>
</div>
<div class="article">
<h1>TITLE 2</h1>
<div class="content">content 2</div>
</div>
<div class="article">
<h1>TITLE 3</h1>
<div class="content">content 3</div>
</div>
<div class="article">
<h1>TITLE 4</h1>
<div class="content">content 4</div>
</div>
http://jsfiddle.net/Rwx7P/3/
You have two blocks with same ID (button and newpost), it must be always diffrent on one page.
function toggle(id) {
var div = document.getElementById(id);
if (div.style.display !== 'none') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
<div id="main">
<div name="first flip card" style="margin-left: 50px; padding: ">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost1')">hide/show</button>
<p id="newpost1" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
<div name="second flip card" style="margin-left: 50px">
<label>
<input type="checkbox" />
<div class="flip-card">
<div class="front">
<h1>Գերմանիա</h1>
<p style="font-size: 50px">1</p>
</div>
<div class="back">
<h1>About me</h1>
<hr />
<p>some text</p>
<button onclick="toggle('newpost2')">hide/show</button>
<p id="newpost2" style="display: none">Test text</p>
<hr />
</div>
</div>
</label>
</div>
</div>
Currently I have some code that looks like so;
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
So when I click the sign up button, I want the div to change to the signup div below, but using the same coding type (if possible) that I used for closing the window. I know it's obvious that I'm a beginner, but I've been searching everywhere and playing around with different techniques but I just can't figure it out!
Really as simple as this:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
And if you want a version that hides the Welcome layer before show the Signup layer:
#signup {
display: none;
}
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
<button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>texttextext</p>
</div>
</div>
Use Jquery :
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
$("#intro_signup_button").click(function() {
$("#signup").show();
});
$("#intro_back_button").click(function() {
$("#signup").hide();
});
#signup {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
<div style="text-align: center;">
<h1 style="margin-bottom: 0;">Welcome</h1>
<hr>
<p>Hi, would you like to sign up or keep watching?</p>
<button id="intro_signup_button">SIGN UP</button>
<button id="intro_back_button">KEEP WATCHING</button>
</div>
</div>
<div id="signup">
<div style="text-align: center;">
<p>show sign up</p>
</div>
</div>
blogspot.co.il is one of my blogger page.
I put in every page a video.
now before the user sees the video, I'd like them to see this image.
and only after the only when the user click on that image ,only then the video start playing.
This is the code for one of the pages:
<div dir="rtl" style="text-align: right;" trbidi="on">
<div dir="ltr" style="text-align: center;">
<br /><br />
<div dir="rtl">
<span style="color: #8e5353; font-size: x-large;"><b>-9- Part</b></span>
</div>
<div dir="rtl">
<span style="color: #0000ee; font-size: x-large;"><b><u>Broken Family. Blessing in disguise</u></b></span>
</div>
<br /><br /><br />
<div>
<div dir="rtl">
</div>
<div dir="ltr">
<div class="video-container">
<iframe height="375" src="https://docs.google.com/file/d/0B0hozXLPGwkIa1dDTUpyUkpuQk0/preview" width="640"></iframe>
</div>
<b style="color: #0000ee; font-size: xx-large;"><u><br /></u></b>
</div>
<div class="separator" style="clear: both;">
</div>
<div class="separator" style="clear: both; direction: ltr;">
</div>
<div class="separator" style="clear: both; text-align: right;">
</div>
<div style="text-align: right;">
<div style="direction: ltr; text-align: left;">
</div>
<div>
<br />
</div>
</div>
<div style="text-align: right;">
</div>
</div>
</div>
</div>
I appreciate your help.
Look trick in this blog
http://beben-koben.blogspot.com/2013/05/trick-for-embed-video-youtube-to-be.html
i hope that useful
I have the following script that shows/hides some text when an image is clicked. This text then is replaced when another image is clicked and so on. At the moment there is always some text visible.
I want this text to disappear (or perhaps display and empty div?) on mouseOut of the image.
Here is what I currently have:
JS:
<script type="text/javascript" language="JavaScript">
<!--
function showonlyonev2(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for(var x=0; x<newboxes.length; x++) {
name = newboxes[x].getAttribute("name");
if (name == 'textboxes') {
if (newboxes[x].id == thechosenone) {
if (newboxes[x].style.display == 'block') {
} else {
newboxes[x].style.display = 'block';
}
} else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
HTML:
<div id="text-container">
<div id="text1" name="textboxes">
<p>Some text here about person 1</p>
<div id="text2" name="textboxes">
<p>Some text here about person 2</p>
<div id="text3" name="textboxes">
<p>Some text here about person 3</p>
<div id="text4" name="textboxes">
<p>Some text here about person 4</p>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" alt="" /> </div>
</a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg" alt="" /> </div>
</a>
</div>
CSS:
#text1 {
width: 300px;
height: 300px;
background: #c2bfba;
}
#text2, #text3, #text4 {
width: 300px;
height: 300px;
background: #c2bfba;
display:none;
}
Thanks for any help.
You could use this in the image tag:
<img src='...' onmouseover='javascript:showonlyonev2('text1')' onmouseout='javascript:showonlyonev2('blank')' />
This way your function gets called whenever the image is hovered over. you can create an empty div called 'blank' so that your function uses it when mouse out, so it appears blank.
Keep your Javascript the same.
Change your HTML to:
<div id="text-container">
<!-- All of these DIV's should have closing tags -->
<div id="text1" name="textboxes"><p>Some text here about person 1</p></div>
<div id="text2" name="textboxes"><p>Some text here about person 2</p></div>
<div id="text3" name="textboxes"><p>Some text here about person 3</p></div>
<div id="text4" name="textboxes"><p>Some text here about person 4</p></div>
<div id="blank" name="textboxes"><p> </p></div>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text1');" class="rollovers">
<div id="person1-rollover"><img src="images/people/person1.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text2');" class="rollovers">
<div id="person2-rollover"><img src="images/people/person2.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text3');" class="rollovers">
<div id="person3-rollover"><img src="images/people/person3.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
<div class="people-images">
<a href="javascript:showonlyonev2('text4');" class="rollovers">
<div id="person4-rollover"><img src="images/people/person4.jpg" onmouseout="javascript:showonlyonev2('blank');" alt="" /> </div></a>
</div>
Change your CSS to:
#blank {
width: 300px;
height: 300px;
background: #c2bfba;
}
#text1, #text2, #text3, #text4 {
width: 300px;
height: 300px;
background: #c2bfba;
display:none;
}
Let me know if that works for you.