Is it possible to send all the elements in my document to the alert function?
If so, how can I do that?
Here is an example document. I want to print all of the elements.
<!DOCTYPE html>
<html>
<head>
<style>
h3 { margin: 0; }
div,span,p {
width: 80px;
height: 40px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
<script>var elementCount = $("*").css("border","3px solid red").length;
$("body").prepend("<h3>" + elementCount + " elements found</h3>");
</script>
</body>
</html>
Sure, you can do it like this:
alert(document.documentElement.outerHTML);
Related
What I'm trying to do here is dynamically add and display content as HTML inside an iframe by using jquery to set the srcdoc attribute on the click of a button. Nothing happens though when I click on the button:
Strangely enough, when I replace $("#myFrame").srcdoc with document.getElementById("myFrame) the code works as intended. That further baffles me.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Jquery Project - Practice </title>
<script type = "text/javascript" src ="jquery-3.4.1.min.js"> </script>
<link href="jquery-ui/jquery-ui.css" rel ="stylesheet">
<script src = "jquery-ui/jquery-ui.js"> </script>
<style type="text/css">
html, body {
font-family:Helvetica, sans-serif;
margin:0px;
padding:0px;
height:100%;
width:100%;
}
div, textarea {
margin:0px;
padding:0px;
}
* {
margin:0px;
padding:0px;
}
#divOne {
width:100%;
height:100%;
background-color:aliceblue;
}
</style>
</head>
<body>
<div id="divOne">
<iframe id ="myFrame"></iframe>
<button id = "click"> Click Me! </button>
</div>
<script type ="text/javascript">
$(document).ready(function() {
$("#myFrame").css({
"height":"300px",
"width":"300px",
"margin":"200px",
"background-color":"bisque"
});
$("#click").click(function() {
$("#myFrame").srcdoc = "<p>Hello World!</p>" ;
//alert("clicked");
});
});
</script>
</body>
</html>
Set it by using .attr()
$(document).ready(function() {
$("#myFrame").css({
"height": "300px",
"width": "300px",
"margin": "200px",
"background-color": "bisque"
});
$("#click").click(function() {
$("#myFrame").attr("srcdoc", "<p>Hello World!</p>");
});
});
html,
body {
font-family: Helvetica, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
div,
textarea {
margin: 0px;
padding: 0px;
}
* {
margin: 0px;
padding: 0px;
}
#divOne {
width: 100%;
height: 100%;
background-color: aliceblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divOne">
<iframe id="myFrame"></iframe>
<button id="click"> Click Me! </button>
</div>
In the following example all the 3 divs with class ".container2" are hidden by default. When I click an h2, the div next to it shall open (which is happening) but when I click the h2 again, the div is not closing but remains open. Please, help me out why it is not getting toggled?
Example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
$('.container2').hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
NOTE: At a time I only want maximum 1 div to open. If I remove
$('.container2').hide() then more than 1 divs might open at a time,
which I don't want!
What you need is this line:
$('.container2:visible').not($(this).next()).hide();
This change will do the intended behavior.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}
h2 {
background: #000;
color: #fff;
margin: 10px;
border-radius: 4px;
padding: 5px 10px;
}
.container2 {
background: yellow;
color: #000;
margin: 0px 10px;
padding: 2px 10px;
}
</style>
<script>
$(document).ready(function() {
$('.container2').hide();
$('h2').click(function() {
$('.container2:visible').not($(this).next()).hide();
$(this).next().toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
Hide all but the current toggled one
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var container2 = $(this).next();
$('.container2').not(container2).hide();
container2.toggle();
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
You will need to do that in two steps.
step 1: hide all h2 divs.
step 2: only toggle the current next() h2 div.
and you should do it with a callback function passed to .hide() to guarantee that it will only be executed after the function has finished hiding the other divs.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
* {margin:0px;padding:0px;}
h2{background:#000;color:#fff;margin:10px;border-radius:4px;padding:5px 10px;}
.container2{background:yellow;color:#000;margin:0px 10px;padding:2px 10px;}
</style>
<script>
$(document).ready(function(){
$('.container2').hide();
$('h2').click(function(){
var btn = $(this).next();
$('.container2').hide(function(){
btn.toggle();
});
});
});
</script>
</head>
<body>
<h2>Set-I</h2>
<div class="container2">123</div>
<h2>Set-II</h2>
<div class="container2">456</div>
<h2>Set-III</h2>
<div class="container2">789</div>
</body>
</html>
I have a confusing issue. When my first div "leftbox" is hovered over, "rightbox" (the hidden div) displays, but it eventually disappears when "leftbox" is not hovered over. But I need "rightbox" to stay visible when rightbox is hovered over, then when the user's mouse leaves rightbox, then it should disappear. How can I get this to work? I'd really appreciate the help.
If you add a container class it works fine.
$(function(){
$('.container').hover(function(){
var boxId = $(this).find("[data-id]").attr('data-id');
$('#'+boxId).stop().fadeToggle();
});
});
.leftbox {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
.rightbox {
width: 100px;
height: 100px;
border: 1px solid black;
background: #99bf8f;
margin-left: 110px;
display: none;
}
.container {
float:left;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div class="leftbox" data-id="functionbox1"></div>
<div class="rightbox" id="functionbox1"></div>
</div>
<script src="test.js"></script>
</body>
</html>
Hi people #stackoverflow,
I'm currently trying to make a nav bar with the function of 'selected-state'.
I got it to work nicely with jsfiddle, http://jsfiddle.net/uphem/U7NLM/ but the selected-state somehow isn't working when I create a html out of this.
It's pretty much an exact copy of what I had in jsfiddle.
I tried to embed the jquery as a file and that didn't work either.
I can't seem to figure out why it's not working..
Please help!
<html>
<head>
<title>selected state test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>
</body>
</html>
You have to load the jQuery code only after the page is loaded, like this:
<script type="text/javascript">
$(document).ready(function() {
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
})
});
</script>
as well, Could it be that your jQuery import call is wrong?
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
for more information about when and how to use // instead of http:// read Is it valid to replace http:// with // in a ?
I've tried your code and it worked for me after that change
If you are working offline your jQuery call is wrong.
Use this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Use this code
<html>
<head>
<title>selected state test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".menu_button").click(function(e) {
$(this).addClass("selected").siblings().removeClass("selected");
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>
</body>
</html>
Try adding:
$(document).ready{
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
});
}
It's a problem with your src:
// this directs to yourdomain.com/ajax....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
//Instead use one of the following
<script src="ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>selected state test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu_button').click(function() {
$(this).addClass('selected').siblings().removeClass('selected')
});
});
</script>
<style type="text/css">
.menu_button {
padding: 10px 20px 10px 20px;
position: relative;
color: #666;
float: left;
border-left: 1px dotted #e5e5e5;
font-size: 14px;
cursor: pointer;
}
.menu_button:hover {
color: #f26d7d;
}
.menu_button:active {
color: #ccc;
}
.menu_button.selected {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="menu_button">button 1</div>
<div class="menu_button">button 2</div>
<div class="menu_button">button 3</div>
<div class="menu_button">button 4</div>
</body>
</html>
I started using jsPlumb and JQuery, I want to connect draggable elements but if I add the
draggable behavior before the connection then the connection does not refresh position.
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.window {
background-color: white;
border: 3px solid #346789;
color: black;
font-family: helvetica;
font-size: 0.8em;
height: 12em;
opacity: 0.8;
padding: 0.5em;
position: absolute;
width: 14em;
z-index: 20;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.jsPlumb-1.3.2-all-min.js"></script>
</head>
<body>
<div>
<div id="a" class="a window" style="width: 100px;height: 100px;border: solid 1px"></div>
<div id="b" class="b window" style="width: 100px;height: 100px;border: solid 1px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".window").draggable();
var a = $("#a");
var b = $("#b");
jsPlumb.connect({
source:a,
target:b,
connector:["Bezier",68],
endpoints:[
["Dot",{radius:12}],
["Rectangle",{width:20,height:30}]
]
});
});
</script>
</body>
</html>
i wrote jsPlumb.
the reason it doesn't refresh is that it has no way of knowing something is being dragged. instead of calling $(".window").draggable(), you either need to let jsPlumb do that for you when a connection is made, or through this method:
jsPlumb.draggable($(".window"));
the first option will not initialise the dragging for any window that doesn't have a connection. the second one will.
There are few ways to do so - refer to the jsPlumb documentation
,but generally you can use:
Id of the element
Array of elements
Or selector (for example class selector that was mentioned previously: jsPlumb.draggable($(".window"));
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>JS plumb test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="/include/jquery.jsPlumb-1.3.16-all-min.js"></script>
<style>
.window {
background-color: #EEEEEF;
border: 1px solid #346789;
border-radius: 0.5em;
box-shadow: 2px 2px 19px #AAAAAA;
color: black;
height: 5em;
position: absolute;
width: 5em;
cursor: pointer;
}
</style>
<script>
jsPlumb.ready(function () {
// three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
//jsPlumb.draggable("container0");
//jsPlumb.draggable(["container0", "container1"]);
jsPlumb.draggable($(".window"));
//perform operation only after DOM is loaded
var e0 = jsPlumb.addEndpoint("container0"),
e1 = jsPlumb.addEndpoint("container1");
jsPlumb.connect({ source: e0, target: e1 });
});
</script>
</head>
<body >
<div class="window" style="left: 20px" id="container0">
</div>
<div class="window" style="left: 200px" id="container1">
</div>
</body>
</html>