I want to print a div with css. Its working with me when I apply inline css but in external and internal css its not working. Below is my code,
<script src="jquery.jqprint.0.3.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("#PrintButton").click( function() {
$('#divToPrint').jqprint();
return false;
});
});
</script>
<style type="text/css">
#media screen,print
{
.test {background:#0F0; width:500px; height:200px;}
}
</style>
<input id="PrintButton" type="button" name="Print" value="Print" />
<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
I have tried your code, it seems to be working fine with external CSS.
<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqprint-0.3.js" type="text/javascript"></script>
<link rel="stylesheet" href="test.css">
<script language="javascript" type="text/javascript">
$(function() {
$("#PrintButton").click( function() {
$('#divToPrint').jqprint();
return false;
});
});
</script>
</head>
<body>
<input id="PrintButton" type="button" name="Print" value="Print" />
<div id="divToPrint" class="test">
Print Me, I'm in DIV
</div>
<body>
</html>
and external css file name : test.css
#media screen,print
{
.test {
background:#0F0; width:500px; height:200px;
}
}
Related
The onclick-function of the <button> in the following code is not working.
I want to show a SAVE button when the editable area is clicked. Then the button's onclick function should display an alert but this is not working.
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
in your implementation css hides the button before the actual click happens
here's JS solution that hides button after alert triggered or by timeout when your contenteditable loses its focus
alternatively you can use opacity instead of visibility in css so it will remain clickable but this feels hacky, someone could click that accidentally so I would not recommend
.views-submit-button {
visibility: hidden;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
<div class="views-exposed-widget">
<div tabindex="1" contenteditable id="editable-text-name" onfocusin="document.getElementById('save-button').style.visibility = 'visible'" onfocusout="setTimeout(function(){document.getElementById('save-button').style.visibility = 'hidden'}, 100)">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.');this.style.visibility = 'hidden';" class="btn btn-outline-dark">Save</button>
</div>
</div>
Try using the below code and add input event to your contenteditable element
$(document).ready(function() {
var isEditClicked = false;
document.getElementById("editable-text-name").addEventListener("input", function() {
$(".views-submit-button").css("visibility", "visible");
}, false);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.views-submit-button {
visibility: hidden;
}
.views-exposed-widget:focus-within+.views-submit-button {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<div class="views-exposed-widget">
<div contenteditable id="editable-text-name">
Editable text here.
</div>
</div>
<div class="views-submit-button">
<button id="save-button" type="button" onclick="alert('button clicked.')" class="btn btn-outline-dark">Save</button>
</div>
</div>
</body>
</html>
I have changed the CSS. You need to change the CSS as per your requirements. But this is the way which you can follow to meet your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<title></title>
<style>
.button {
display: none;
}
input:hover + .button, .button:hover {
display: inline-block;
}
</style>
</head>
<body>
<div class="small-4 columns">
<input type="text" value="Hi" />
<button class="button" onclick="alert('Hello');">Click Me</button>
</div>
</body>
</html>
The button is hidden that's why you don't see him. In your style change .views-submit-button to visible and button appears. In your wrapper div class name is .views-submit-button so that's why button is hidden by default.
.views-submit-button {
visibility: hidden;
}
You can use toggle method to manipulate button's visibility after click
The css execute first. you may use javascript to control it
I have read through the available links on this topic and they haven't helped.
I'm trying to get the following code to run. The "menu.html" loads the "world.html" in a div on another page, and the HTML comes up, but not the JavaScript.
At first I had the JS in a separate file, but when it wasn't running I moved it into "world.html", but it didn't fix the problem. I have also tried referencing jQuery.
This is menu.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<a id="infoButton" class="infoButton" href="info.html"></a>
<a id="bodyButton" class="bodyButton" href="body.html"></a>
<a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
<a id="leaveButton" class="leaveButton" href="leave.html"></a>
<a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
</body>
<footer>
</footer>
</html>
And preparePage.js, which gets rid of the menu and loads world.html:
function preparePage() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("world.html", function enter() {
$("#enterButton").fadeOut("slow");
});
}
And last but not least, world.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function wut() {
window.alert("owo");
}
</script>
</head>
<body onload="wut(); return false;">
mhfkhgfhtfjhfjj<br><br>
<canvas id="gameBox" width="1000" height="500" style="background-color:#ffffff;"></canvas>
</body>
<footer>
</footer>
</html>
EDIT: Also including launchpad.html, which is the page containing the div in which menu.html and world.html load:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="openGame(); return false;">
<div id="cloud"></div>
<div id="box" class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="openGame.js"></script>
</body>
<footer>
</footer>
</html>
And openGame.js, which changes the shape of #box and loads menu.html:
function openGame() {
$("#cloud").fadeOut("fast");
$("#box").animate({
height: '750px',
width: '1700px',
top: '100px',
left: '100px',
padding: '0px'
});
$("#box").load("menu.html");
document.getElementById("box").style.backgroundImage = "url('Images/menuBackground.png')";
}
I would use JQuery for the on-click events, and also make sure that all of the element id's that you reference in your script are present in the page. Another thing to check is that your scripts are loading properly, the letter casing of the file name is important on Linux servers.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="layout.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="contact.js"></script>
<script src="preparePage.js"></script>
</head>
<body>
<ul id="menu">
<li><a id="infoButton" class="infoButton" href="info.html">test1</a></li>
<li><a id="bodyButton" class="bodyButton" href="body.html">test2</a></li>
<li><a id="enterButton" class="enterButton">test3</a></li>
<li><a id="leaveButton" class="leaveButton" href="">test4</a></li>
<li><a id="contactButton" class="contactButton">test5</a></li>
</ul>
<div id="box" style="width:500px; height:500px; background-color:#FFF; background-image:url(http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a);">
test box
</div>
<footer>
</footer>
</body></html>
Javascript:
$( document ).ready(function() {
$( "#enterButton" ).click(function() {
document.getElementById("box").style.backgroundImage = "none";
$("#infoButton").fadeOut("slow");
$("#bodyButton").fadeOut("slow");
$("#leaveButton").fadeOut("slow");
$("#contactButton").fadeOut("slow");
$("#box").load("/zalun/VkCyH/app.html", function enter() {
$("#enterButton").fadeOut("slow");
})
})
});
Live example: https://jsfiddle.net/ucjs77L8/
Apart from the obvious fact that you don't have an element with the id box, please realise that the jQuery load method will not trigger the onload callback that you have defined in world.html. So you'd need to call that yourself.
So fix two things:
define box, e.g.
<div id="box"></div>
call wut(), from menu.html:
$("#box").load("world.html", function enter() {
wut();
$("#enterButton").fadeOut("slow");
});
The onload= in world.html has no effect when loaded like this, because to the browser there is only one document, which already has loaded. So, there is no second load event triggering.
Alternatively you could just add a script in world.html, near the end just before the closing </body> tag, which will run:
<script>
wut();
</script>
Trigger the image when i click submt button and in current active tab
<form name="myform" onsubmit="return onsubmitform();">
<input type="submit" name="operation" onclick="document.pressed=this.value" value="GetCATHY"/>
</form>
<script type="text/javascript">
function onsubmitform()
{
if(document.pressed=='GetCATHY')
{
document.pressed.action="img src=a.jpg";
}
}
You can easily do this using jQuery.
However this is pretty simple stuff so I suggest doing a bit of reading and practice on basic html.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$("#hidden").show();
});
});
</script>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<form><input type="submit" id="submit"></form>
<div id="hidden" class="hidden">IMAGE</div>
</body>
</html>
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
I am trying to write a code which will take the input from user and create a draggable for the input. I could write HTML and CSS using javascript but when I try to do the same for jquery; its not working. Where am i going wrong ?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function init() {
var op=document.getElementById("inputo").value;
document.write("<style>" + "#" + op + "{color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px; }" +"<br>" + "</style>");
document.write("<h1 id=" + op + ">" + op + "</h1>");
document.write("<script>" "<br>"+ " $(document).ready(function() { #op.draggable();});" +"</script>");
}
</script>
</head>
<body>
Draggable:
<input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>
</body>
</html>
You need to load jquery.min.js BEFORE jquery-ui.min.js, AND *do not nest script*s, so your <head> tag should be:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>
function init() {
/*...SOME STUFF HERE*/
}
</script>
</head>
instead of document.write, you can add a tag like this.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp- content/themes/jquery/css/base.css?v=1">
<script>
function init()
{
var op=document.getElementById("inputo").value;
var string = "<h1 class='test' style='color:red; height:50px; width:50px; border:1px solid black ; border-radius:100%; line-height: 50px;'>" + op + "</h1>";
$("#container").html(string);
$(".test").draggable();
}
</script>
</head>
<body>
Draggable: <input type="text" id="inputo"/>
<input type="button" onClick="init()" value="submit"/>
<div id="container"></div>
</body>
</html>