I want to make it so that if the user presses for example 'x', my iframe window with a chat opens. If they press x again, it closes.
Current code:
<div id="mydiv">
<iframe name ="frame" src="" width="25%" height="300"></iframe>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 192) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","http://deadsimplechat.com/+f8ckA/");
}
else {
$("#frame").attr("src","");
}
}
});
});</script>
function checkKey(e) {
e = e || window.event;
if(e.keyCode == 88) { // x pressed
if(myWindow) {
myWindow.close();
myWindow = undefined;
} else {
myWindow = window.open("", "", "width=200,height=100");
}
}
}
var myWindow;
document.onkeydown = checkKey;
Use something like this.
$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 49) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","https://www.example.com/");
}
else {
$("#frame").attr("src","");
}
}
});
});
You can edit the keycode by finding the proper keycode.
I assume you will have some iframe like this in your code or you can create iframe from jquery. You can also remove the ifram from jquery. Also edit the example source URL to your appropriate site.
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
You have to include the library whenever working with jquery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
EDIT
This must be working.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(document).keypress(function(e) {
var keycode = e.which;
if (e.which == 49) {
var src = $("#frame").attr("src");
if(!src.trim()) {
$("#frame").attr("src","https://www.w3schools.com/");
}
else {
$("#frame").attr("src","");
}
}
});
});
</script>
</head>
<body>
<div id="mydiv">
<iframe id="frame" src="" width="100%" height="300"></iframe>
</div>
<input type="text">
</body>
</html>
Related
Hi i have code like this:
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Show more") {
$("#toggle").text("Show less");
$("#text").slideDown();
} else {
$("#toggle").text("Show more");
$("#text").slideUp();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-container">
<button id="toggle">Show more</button>
</div>
In show more i would like to add a icon /f078 and in show less /f106.
How to add? I tried by css and html tags but it doesnt work.
I have been trying to create a like counter for a webpage. Currently, It only shows the number likes when someone presses the button. The code is written below.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
</body>
</html>
I am aware that .innerHTML is the problem behind 'the number of likes' not being shown but I am not sure how to make it so that it always displayed and centred above the button.
Eg. If the page has 143 likes.
143
Please Like!
Please help me out - Thank You so much for reading
You have to display the counter initially, and then keep track each time it changes.
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
showCounter();
}
}
function showCounter(){
if(typeof(Storage) !== "undefined") {
document.getElementById("result").innerHTML =localStorage.clickcount;
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button" style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>
<script>
showCounter(); //Fisrt call, Once the page is loaded.
</script>
</body>
</html>
I have a "What's New" page on my website, and I want users to be able to hide and show the post using a button/a href link text. The code has been edited into the post below.
HTML:
<p>Post name</p>
<button class="visi" onclick="toggleVis()">+</button>
<div id="post-container" hidden>
<p class="post-text">Test sample paragraph = srve function private</p>
<img src="error.jpeg" alt="error" style="width:auto;height:200px">
</div>
JavaScript:
function toggleVis() {
var x = document.getElementById("post-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
CSS:
.visi {
width:auto;
-webkit-border-radius:10px;
height:auto;
background-color:#79E119;
border:5px solid #FFFFFF;
}
Surround the entire blog post with a <div> element, and use jQuery's .toggle() function to show and hide it when users click on a related link or button.
HTML:
<div id="clickme">
Click here
</div>
<div id="blogpost"><h3>my blog title</h3><p>my blog content</p></div>
Javascript:
$( "#clickme" ).click(function() {
$( "#blogpost" ).toggle( "slow", function() {
// Animation complete.
});
});
I hate to ask again but i am still habeing problems wit my code fo4r my traffic lights i have amended some of it but there are still some issues for example the button does not appear, i am programming in dreamweaver and the code is html.
<p>This is my Traffic Light script</p>
<img id="image" src="RedLight.jpg";
<button type="button" onclick="changeLights()">Change Lights</button>
</head>
<body>
<script>
var list=["RedLight.jpg","RedAmberLight.jpg","GreenLight.jpg","AmberLight.jpg"]
var lighton = "Red"
function changeLights() {
if (lighton=="Red") {
image.src=list[1];
lighton="RedAmber";}
if (lighton=="RedAmber") {
image.src=list[2];
lighton="Green";}
if (lighton=="Green") {
image.src=list[3];
lighton="Amber";}
else{
image.src=list[3];
lighton="Red";}
}
</script>
</body>
</html>
Here is a solution:
<body>
<p>This is my Traffic Light script</p>
<img id="image" src="RedLight.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
var list=["RedLight.jpg","RedAmberLight.jpg","GreenLight.jpg","AmberLight.jpg"]
var lighton = "Red"
function changeLights() {
if (lighton=="Red") {
document.getElementById("image").src = list[1];
lighton="RedAmber";
}
else if (lighton=="RedAmber") {
document.getElementById("image").src=list[2];
lighton="Green";
}
else if (lighton=="Green") {
document.getElementById("image").src=list[3];
lighton="Amber";
}
else{
document.getElementById("image").src=list[0];
lighton="Red";
}
}
</script>
</body>
How would you make it when a button is clicked the image that the button is made of will change?
#button {
text-align:center;
float:left;
}
#button:focus {
text-align:center;
float:left;
background-image: url('qmb2.png');
}
<input type="image" src="qmb.png" name="saveForm" class="btTxt submit" id="button" height="49.5px" padding = "0px" />
Using jQuery
$("#flowers").click(function () {
var _this = $(this);
var current = _this.attr("src");
var swap = _this.attr("data-swap");
_this.attr('src', swap).attr("data-swap", current);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg' width="500" height="400" />
Using Javascript
img{height:400px; width:500px}
<script>
function swap()
{
if (document.pic.src=='http://www.rachelgallen.com/images/snowdrops.jpg'){
document.pic.src='http://www.rachelgallen.com/images/daisies.jpg';
}
else if (document.pic.src=='http://www.rachelgallen.com/images/daisies.jpg'){
document.pic.src='http://www.rachelgallen.com/images/snowdrops.jpg';
}
}
</script>
<img src="http://www.rachelgallen.com/images/snowdrops.jpg" name="pic" onclick="swap()"/>
Using pure mouseover/mouseout
img{height:400px; width:500px}
<img src="http://www.rachelgallen.com/images/daisies.jpg"
onMouseOver="this.src='http://www.rachelgallen.com/images/snowdrops.jpg';"
onMouseOut="this.src='http://www.rachelgallen.com/images/daisies.jpg';">
Here is pure JavaScript, if JQuery is out of the question...
<input type="image" id="button" name="img" src="firefox.ico" width="50" />
<script>
document.getElementById("button").addEventListener("click", function(){
this.setAttribute("src", "chrome.ico");
});
</script>
Not that I have something against Rachel's answer on pure JavaScript use, but I just feel there could be something more reader-friendly written to toggle the image, such as:
document.getElementById("button").addEventListener("click", function(){
var path;
if(this.getAttribute("src") === "firefox.ico")
path = "chrome.ico";
else
path = "firefox.ico";
this.setAttribute("src", path);
});
IMO is a little bit cleaner-ish, and it's really not advised to use onclick properties in html, but rather implement listeners via JavaScript.
Jquery, when you click first time the class cliked will be added.
$(document).ready(function(){
$('button').on('click', function(){
$(this).toggleClass('clicked');
});
});
And css:
Button{
Background: img1.jpg;
}
Button.clicked{
Background: img2.jpg;
}