I have two embed code/sections on a single page. What I am wanting is to make the Social Media logo clickable and then the embed for the corresponding embedded social media will be visible and the other is hidden. I was able to do this with one section but the code was all html. The problem is that Twitter embed has a section in the middle of the embed and it is messing up the output when I do it the old way.
This is the old code that I have mostly working (minus the embed not show correctly)
<body onload="updateForm(media)">
<label>
<input type="image" src="\CST-WebPage\media files\social media\youtube.png" alt="YouTube" style="width:100px" name="media" value="ty" onclick="updateForm(this)">
</label>
<label>
<input type="image" src="\CST-WebPage\media files\social media\twitter.png" alt="Twitter" style="width:100px" name="media" value="tw" onclick="updateForm(this)">
</label>
<div id="SM"></div>
</body>
function updateForm(control) {
if (control.value == "tw") {
document.getElementById("SM").innerHTML = twitter;
}
else {
document.getElementById("SM").innerHTML = youtube;
}
}
var youtube = '<div>\
<iframe src="https://www.youtube.com/embed/videoseries?list=PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e" width="600" height="400"allowfullscreen scrollable="yes"></iframe>\
<p id="success"></p>\
</div>';
var twitter = '<div>\
<a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>\
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>\
</div>';
Instead of having <div id='SM'></div> I figure it would be easier to make it <div id='youtube'> and <div id='twitter'>
Thank in advance for any help or insight you can provide.
You can set or remove the hidden attribute to elements with id twitter or youtube.
function updateForm(control) {
if (control.value == "tw") {
document.getElementById("twitter").removeAttribute('hidden');
document.getElementById("youtube").setAttribute('hidden', true);
} else {
document.getElementById("youtube").removeAttribute('hidden');
document.getElementById("twitter").setAttribute('hidden', true);
}
}
Related
I'm trying to make a POS system with HTML, CSS and Javascript.
I currently have a site that loads in the inventory to an iframe and from there I want the buttons from the iframe to add their information such as "Name, price, amount etc." to another div.
Is this possible?
I already tired linking the target and such, but nothing worked.
Index page:
<wrapper>
<div id="category">
<a href="øl_soda.html" target="iframe1">
<input type="button" class="categories_button" value="Øl/Soda" />
</a>
<a href="drinks.html" target="iframe1">
<input type="button" class="categories_button" value="Drinks" />
</a>
<a href="shot.html" target="iframe1">
<input type="button" class="categories_button" value="Shots" />
</a>
<a href="diverse.html" target="iframe1">
<input type="button" class="categories_button" value="Diverse" />
</a>
</div>
<iframe name="iframe1" id="inventory" src="velkommen.html">
</iframe>
<div id="checkout">
<ul id="myList">
<li>
Ja
</li>
</ul>
<button onclick="remove()">Remove</button>
<button onclick="reset()">Reset</button>
</div>
</wrapper>
Site open in iframe:
<script>
function add_rynkeby() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Rynkeby");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function add_cocio() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Cocio");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
function remove() {
var list = document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}
</script>
<script>
function reset() {
var list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
}
</script>
<wrapper>
<button onclick="add_rynkeby()" class="inventory_button" target="index.html">Rynkeby</button>
</wrapper>
So I want the buttons from the iframe site to display it's name into the "checkout" div on the index page.
To have the page in the iframe communicate information to the parent page, use the postMessage API. MDN page is https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage but searching for "postmessage api" will turn up many guides.
The general idea is:
the iframed page's JS sends a message when the button is clicked
the parent page's JS listens for messages, and responds in some way when it recognizes a received message as coming from the iframe
That "recognizes a received message as coming from the iframe" is an important security point: you'll need to set things up so that the parent page only trusts the messages you intend it to trust. Most guides to the API will cover that.
I have one chatbot script in my website and I would like to store data what the user inputs to chatbot and store it to hidden input field.
At the moment it almost works, only the stored data is a bit messy.
This is what I store at the moment:
undefined0: What do you think about Brexit?0: What do you think about Brexit?0: What do you think about Brexit?1: hello2: Do you have an example to illustrate your point?0: What do you think about Brexit?1: hello2: Do you have an example to illustrate your point?
Sample image of chatbot
The chatbot script I use is this:
https://github.com/mrfishie/js-chatbot
This is the code for storing the chatbot text:
<iframe id="chatbot" scrolling="no" src="[rel index.html]" frameborder="0" height="400" width="90%"></iframe>
$ ('#chatbot').load(function(){
var iframe = $ ('#chatbot').contents();
var chatData;
iframe.find("div").change(function(){
iframe.find('p').each(function(index) {
chatData += (index + ': ' + $ (this).text());
});
$ ('input.text-input').val(chatData)
});
});
Contents inside iframe:
<body>
<div class="page-wrap">
<div class="container">
<div class="chatbox" id="chatId"><p>What do you think about Brexit?</p><br></div>
<form method="get" action="#">
<input type="text" id="respInput" autofocus/><button type="submit" onClick="saveData()">Go</button>
</form>
</div>
</div>
</body>
Any advice on how to store it more cleaner or to filter the text?
I'm new to javascript and can't figure out the best way to solve this problem.
I have a div called info.
I have dozens of videos, and am constantly adding new videos.
When I click a video, I want to update info.
So I was thinking I need a hidden div with the text, and getElementsByClassName for something like this:
<div class="video"><a href="./video1.mp4" target="videoplayer" onclick="showDescription()><div class="description"><p>description for video1</div>
<div class="video"><a href=./video2.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video2</div>
<div class="video"><a href=./video3.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video3</div>
and
function showDescription(){
var description = this.getElementsByClassName("description");
document.getElementById("info").innerHTML = description;
{
That doesn't work. Is using getElementsByClassName a good way to do this, or can anyone suggest another way?
Here's the actual html I'm using:
<div id="videoplayer">
<iframe name="VideoPlayer" width="80%" height="100%" src="http://www.youtube.com/embed/videoseries?list=PL5A2FB27789F71E63> </iframe>
</div>
<div id="info">
<p>Welcome</p>
</div>
<div class="thumb"><p>
<img src="http://discolemonade.com/roku/images/thumbs/MusicVideos/MV-ThumbSmallPlaylist.jpg">
Hours of music videos, refreshed often.
</p>
<div class="longinfodiv">
<p class="longinfo">this is the long version of the music video playlist info</p>
</div>
</div>
And the javascript:
function changeInfo() {
var longinfo = document.getElementsByClassName("longinfo");
document.getElementById("info").innerHTML = longinfo;
}
First structure your HTML file properly:
<div class="video">
Link
<div class="description">description for video1</div>
</div>
Then use the following script:
function showDescription(){
var video = this.parentNode;
var desc = video.children[1];
document.getElementById("info").innerHTML = desc.innerHTML;
}
How to change the image on the div when input image is clicked.
I tried this but nothing is working .. ?
control is not even entering the the if/else portion of each() loop.
My div is having a ID do i need ID for each image inside every div to change the image or ID of DIV is more than enough to change the image inside the div ?
javascript & Jquery code :--
var div_class_scrollable_Image = [
"Groung-Floor-Image" , "Floor-1-Image", "Floor-2-Image", "Floor-3-Image"
];
function show_area( parameter_image_array, parameter_image)
{
// set img src
// $("." + parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
//$('.Floor-3 img').attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$(element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$(element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
//alert("hellooooo");
});
}
Html code :---
<div id="images" class="scrollable">
<div id="Groung-Floor" class="input">
<input id="Groung-Floor-Image" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ" onclick="show_area( 'div_class_scrollable_Image', 'Groung-Floor-Image' )" />
<p >Groung-Floor</p>
<hr>
</div>
<div id="Floor-1" class="input">
<input id="Floor-1-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area('div_class_scrollable_Image', 'Floor-1-Image')" />
<p >1-Floor</p>
<hr>
</div>
<div id="Floor-2" class="input">
<input id="Floor-2-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image')" />
<p >2-Floor</p>
<hr>
</div>
<div id="Floor-3" class="input">
<input id="Floor-3-Image" type="image" src="http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png" onclick="show_area( 'div_class_scrollable_Image', 'Floor-2-Image', )" />
<p >3-Floor</p>
<hr>
</div>
</div>
Please suggest
You also may use background-image:url("/path/image") for Div and later change it like document.getElementById(DivId).style.backgroundImage = "/path/new_image"
See to http://www.w3schools.com/css/css_background.asp
I'm sorry but your code is almost unreadable and... ugly ;-) I'll give you this code as an hint to improve yours:
HTML
<div>
<input type="image" src="foo.jpg" data-alt-src="bar.jpg" class="swap" />
</div>
JavaScript
$(".swap").click(function () {
$(".swap").each(function () {
var alt = $(this).data("alt-src");
$(this).attr("src", alt);
});
//do other work if needed...
});
As you can see I use the data- attribute to set an alternate image directly in the HTML tag, then I read it on click event and I replace the current src with the alternate image.
Thanks batu Zet or correcting array issue.
this link answered my question ...
Programmatically change the src of an img tag
This worked :--
$(parameter_image_array[2]).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
This also worked :---
$(parameter_image_array).each(function(index, element) {
if(element != parameter_image )
{
$("#" +element).attr('src', 'http://ipadwisdom.com/wp-content/uploads/2014/02/NestThermostatAppIcon.png');
}
else
{
$("#" + element).attr('src', 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRXWRtwgI9heLVdQJhRcozi2XV3q5m2RTZwdrTuRGTcFfM708xyBQ');
}
});
I write a static web pages-no server at this point.All the Headers and footers for all pages are same. There 4 buttons on header. I want to change only the part of the page between header and footer when a button in the header is clicked. For example there are 4 buttons Home, Activities etc.. If i click activities then header and footer of page should remain and activities page should come in between header and footer. How can i do that?
once again -no server at the moment so ajax will not work for me.
At this point I have the button codes(the page which displayed after I press the activities button for example) in separate html files.
Thanks in advance.
Try this:
HTML:
<input name="" type="button"onclick="hideLayer('btn2content'); hideLayer('btn3content'); hideLayer('btn4content'); showLayer('btn1content');" value="btn1" />
<input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn3content'); hideLayer('btn4content'); showLayer('btn2content');" value="btn2" />
<input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn2content'); hideLayer('btn4content'); showLayer('btn3content');" value="btn3" />
<input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn2content'); hideLayer('btn4content'); showLayer('btn4content');" value="btn4" />
The new area called "content-wrapper" (below) is where all your content will go; it's all shown on the same page.
<div id="content-wrapper">
<div id="btn1content" style="display:block;" onclick="">stuff</div>
<div id="btn2content" style="display:none;">more stuff</div>
<div id="btn3content" style="display:none;">other stuff</div>
<div id="btn4content" style="display:none;">that stuff</div>
</div>
Javascript:
<script type="text/javascript">
<!--
function hideLayer(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
}
//-->
</script>
<script type="text/javascript">
<!--
function showLayer(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
}
//-->
</script>
No servers required :)