I want to turn the JavaScript in this example into jQuery.
Basically I've jerry-rigged two scripts together. One is jQuery; creates the "active" function. But the hide/display layer function is in Javascript, and there's too much code for my liking, I'm thinking it must be possible to cut it down into something simple and effective with jQuery.
FYI, I just started out with Javascript and jQuery.
Help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSMenu</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function HideLayer(d) { document.getElementById(d).style.display = "none"; }
function DisplayLayer(d) { document.getElementById(d).style.display = "block"; };
$(function() {
$('div.menuitem').click(function() {
var $this = $(this);
$('.active').removeClass('active');
$this.addClass('active');
})
});
</script>
<style>
#menuholder {width:100px; float:left; border-bottom:solid thin #000;}
.menuitem {border-top:solid thin #000; border-left:solid thin #000; border-right:solid thin #000;}
.menuitem:hover {cursor:pointer; color:#555}
.active {font-weight:bold; color:#000}
.active:hover {color:#000}
#layerholder {float:left; margin-left:20px; width:50px; height:50px; border:solid thin;}
.layer {padding-left:3px; font-size:36px; display:none;}
</style>
</head>
<body>
<div id="menuholder">
<div onClick="DisplayLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');HideLayer('fourthLayer')" class="menuitem">Item 1</div>
<div onClick="HideLayer('firstLayer');HideLayer('thirdLayer');HideLayer('fourthLayer');DisplayLayer('secondLayer')" class="menuitem">Item 2</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('fourthLayer');DisplayLayer('thirdLayer')" class="menuitem">Item 3</div>
<div onClick="HideLayer('firstLayer');HideLayer('secondLayer');HideLayer('thirdLayer');DisplayLayer('fourthLayer')" class="menuitem">Item 4</div>
</div>
<div id="layerholder">
<div class="layer" id="firstLayer">1</div>
<div class="layer" id="secondLayer">2</div>
<div class="layer" id="thirdLayer">3</div>
<div class="layer" id="fourthLayer">4</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
You could change your HTML to:
<div id="menuholder">
<div rel="firstLayer" class="menuitem">Item 1</div>
<div rel="secondLayer" class="menuitem">Item 2</div>
...
</div>
And then use this jQuery:
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$('#' + $(this).attr('rel')).show();
});
This also not 100% perfect as rel is not a valid attribute for div elements. You should consider changing the divs to a elements (and use the href attribute) which has the benefit that the browser also jumps to the linked element.
DEMO
Update: If you decide to go with links, it would be:
<div id="menuholder">
<a href="#firstLayer" class="menuitem">Item 1</div>
<a href="#secondLayer" class="menuitem">Item 2</div>
...
</div>
and
$('.menuitem').click(function() {
$('.layer').hide();
$('.active').removeClass('active');
$(this).addClass('active');
$(this.href).show();
});
jQuery is JavaScript. There is absolutely no reason to "convert" anything.
And jQuery has hide and show functions built in.
$('#id').hide();
And as for your onClick event..
It should be lowercase.
You could just do $('.layer').hide();$('#specificLayer').show();.
The script on that page already uses jquery as shown by the <script src="http://code.jquery.com/jquery-latest.js"> at the top, and the use of the $ sign before variables after it. Jquery is just a set of javascript functions in a library, so you can combine them without issue.
Related
Well i'm new to html/js scripting but i'm working on a project and i want to using hyperlink to show/hide divs
for example if i click on first hyperlink it should show div id:1 only and if i click on second hyperlink it should show 2nd div only.
i managed to find an example of what i need on internet but i have no idea,why whatever i try it doesnot work for me
an example of what i need - my fiddle
and this is my code
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
so you ned to include JQuery that's what $() is.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
It is Working For me on JSFIDDLE. Add jquery library on your local project.
add This on your Head Tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
you forget to include $ jquery in you script tag
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top:20px;
}
</style>
</head>
<body>
<body>
Click a button to make it visible:<br /><br />
One
Two
Three
Four<br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
</body>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$("div").hide();
// Show chosen div, and hide all others
$("a").click(function (e)
{
//e.preventDefault();
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
</script>
</body>
</html>
You should add jquery in your project.
You can use a CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
OR
you can include your own copy of library in project.
<script src="path/jquery.min.js"></script>
I was wondering how to make the individual menu items fade in with delay on page load.
I would like them to fade in not in a chronological order, so let's say first to appear would be #item 3, then #item 1, then #item 5 and so on...
How would such a jQuery or JavaScript code look and where in the code would I need to paste it?
Thanks a lot for help!
This should do the job. Basically give the elements that you want to fadeIn a class of hidden, or any other class name that you can target. You then set the display of that class to "none". Using jQuery you target each item that you want to fadeIn by its ID and you set a desired delay() before that item will be fadedIn using the fadeIn() function.
So in this example #item2 will fadeIn after 1500ms, #item3 after 2500ms and #item1 after 4000ms.
Hope this helps!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li id="item1" class="hidden">First</li>
<li id="item2" class="hidden">Second</li>
<li id="item3" class="hidden">Third</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#item1').delay(4000).fadeIn('slow')
$('#item3').delay(2500).fadeIn('slow')
$('#item2').delay(1500).fadeIn('slow')
})
</script>
</body>
</html>
You can use setTimeout and put it into a closure and work.
$(function () {
var currentTime = 0;
$("#item1, #item2, #item3")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
Full Code
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8" />
<script>
$(function () {
var currentTime = 0;
$("#item3, #item1, #item2")
.hide()
.each(function () {
(function (which, currentTime) {
setTimeout(function () {
which.fadeIn(100);
}, currentTime);
})($(this), currentTime);
currentTime += 2500;
});
});
</script>
<style>
div {background: #ccf; margin: 10px; line-height: 100px; text-align: center;}
</style>
<title>My Menus</title>
</head>
<body>
<div id="item1">This is menu 1.</div>
<div id="item2">This is menu 2.</div>
<div id="item3">This is menu 3.</div>
</body>
</html>
This can be achieved by following these steps:
1. Set the "display" property of the elements to "none" in CSS
2. Put your code in "$(document).ready(function(){ here })" after including the jQuery library
3. Set the delay(value) to the elements as needed for the order you want to show the elements
4. Call the fade function or any other effect or function for the elements
You can make the elements appear in any order you want, you just need to set the delay(value) accordingly. The later you want the elements to appear, the higher should you set this value.
In this example the elements appear in chronological order, just change the delay(value) to suit your needs. You can select the elements according to your needs. For example, here ID isn't used to select the elements, but can be used as well. This method works great too!
Remember to include the jQuery library first!
<!DOCTYPE html>
<html>
<head>
<style>
li {
display: none
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("li:nth-child(1)").fadeIn();
$("li:nth-child(2)").delay("1000").fadeIn();
$("li:nth-child(3)").delay("2000").fadeIn();
$("li:nth-child(4)").delay("3000").fadeIn();
$("li:nth-child(5)").delay("4000").fadeIn();
$("li:nth-child(6)").delay("5000").fadeIn();
$("li:nth-child(7)").delay("6000").fadeIn();
$("li:nth-child(8)").delay("7000").fadeIn();
$("li:nth-child(9)").delay("8000").fadeIn();
$("li:nth-child(10)").delay("9000").fadeIn();
});
</script>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
<li>Eighth</li>
<li>Ninth</li>
<li>Tenth</li>
</ul>
</body>
</html>
Assuming a list like this of unknown number of items
<div class="fadein-delay">
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
<div>item 4</div>
...
</div>
you will a more modular script
$(function () {
$(".fadein-delay > div").each(function(index) {
console.log($(this).text());
$(this).delay(300*index).fadeIn(600);
});
});
and css that hides all items initially
.fadein-delay > div {
display: none;
}
Here is a working example https://codepen.io/giorgosk/pen/aVpXad
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice
How would I modify the JavaScript below using jquery?
It works without jquery, but since we are in fact, using jquery, there must be a simpler way.
<!doctype html>
<html>
<head>
<title>JavaScript CSS Test1</title>
<style type="text/css">
.test{
font-family:Helvetica,sans-serif;
color:navy;
font-size:20px;
padding-top:10px;
padding-left:10px;
padding-right:10px;
padding-bottom:20px;
border:5px solid lime;
}
</style>
</head>
<body>
<div>
<div class="test">
Test1
</div>
<div class="test">
Test2
</div>
<div class="test">
Test3
</div>
<div class="test">
Test4
</div>
</div>
<script>
window.onload=function(){
var loc=location.href;
if(loc.indexOf("javascript-css-test1")!=-1){
document.getElementsByClassName("test")[3].style.paddingBottom="3px";
}
}
</script>
</body>
</html>
Also, I have to integrate the code into the existing js which has variables for several other urls, and functions as constructors to initialize other functions.
Thanks!
You can done it with css very easily
div:nth-child(4)
{
color:red;
}
Try this jQuery code :
$(window).load(function() {
loc = location.href
if(loc.indexOf("javascript-css-test1")!=-1){
$(".test:nth-child(4)").css({'padding-bottom': '3px'})
}
})
you can use eq selector for jQuery
if(loc.indexOf("javascript-css-test1")!=-1){
$(".test").eq('3').css({paddingBottom : '3px'});
or
$(".test:eq(3)").css({paddingBottom : '3px'});
}
The JavaScript code window.print() can print the current HTML page.
If I have a div in an HTML page (for example, a page rendered from an ASP.NET MVC view), then I want to print the div only.
Is there any jQuery unobtrusive JavaScript or normal JavaScript code to implement this request?
Making it more clear, suppose the rendered HTML page is like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
<title>
<asp:ContentPlaceHolder runat="server" ID="TitleContent" />
</title>
</head>
<body>
<div id="div1" class="div1">....</div>
<div id="div2" class="div2">....</div>
<div id="div3" class="div3">....</div>
<div id="div4" class="div4">....</div>
<div id="div4" class="div4">....</div>
<p>
<input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" />
</p>
</body>
</html>
Then I want to click on the Print button, only printing div3.
I would go about it somewhat like this:
<html>
<head>
<title>Print Test Page</title>
<script>
printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">')
function printDiv(divId) {
window.frames["print_frame"].document.body.innerHTML=printDivCSS + document.getElementById(divId).innerHTML;
window.frames["print_frame"].window.focus();
window.frames["print_frame"].window.print();
}
</script>
</head>
<body>
<h1><b><center>This is a test page for printing</center></b><hr color=#00cc00 width=95%></h1>
<b>Div 1:</b> Print<br>
<div id="div1">This is the div1's print output</div>
<br><br>
<b>Div 2:</b> Print<br>
<div id="div2">This is the div2's print output</div>
<br><br>
<b>Div 3:</b> Print<br>
<div id="div3">This is the div3's print output</div>
<iframe name="print_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
</body>
</html>
Along the same lines as some of the suggestions you would need to do at least the following:
Load some CSS dynamically through JavaScript
Craft some print-specific CSS rules
Apply your fancy CSS rules through JavaScript
An example CSS could be as simple as this:
#media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
Your JavaScript would then only need to apply the "printable" class to your target div and it will be the only thing visible (as long as there are no other conflicting CSS rules -- a separate exercise) when printing happens.
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
You may want to optionally remove the class from the target after printing has occurred, and / or remove the dynamically-added CSS after printing has occurred.
Below is a full working example, the only difference is that the print CSS is not loaded dynamically. If you want it to really be unobtrusive then you will need to load the CSS dynamically like in this answer.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Print Portion Example</title>
<style type="text/css">
#media print {
body * {
display:none;
}
body .printable {
display:block;
}
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<h1>Print Section Example</h1>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="div5">Div 5</div>
<div id="div6">Div 6</div>
<p><input id="btnSubmit" type="submit" value="Print" onclick="divPrint();" /></p>
<script type="text/javascript">
function divPrint() {
// Some logic determines which div should be printed...
// This example uses div3.
$("#div3").addClass("printable");
window.print();
}
</script>
</body>
</html>
Try this JavaScript code:
function printout() {
var newWindow = window.open();
newWindow.document.write(document.getElementById("output").innerHTML);
newWindow.print();
}
<div id="invocieContainer">
<div class="row">
...Your html Page content here....
</div>
</div>
<script src="/Scripts/printThis.js"></script>
<script>
$(document).on("click", "#btnPrint", function(e) {
e.preventDefault();
e.stopPropagation();
$("#invocieContainer").printThis({
debug: false, // show the iframe for debugging
importCSS: true, // import page CSS
importStyle: true, // import style tags
printContainer: true, // grab outer container as well as the contents of the selector
loadCSS: "/Content/bootstrap.min.css", // path to additional css file - us an array [] for multiple
pageTitle: "", // add title to print page
removeInline: false, // remove all inline styles from print elements
printDelay: 333, // variable print delay; depending on complexity a higher value may be necessary
header: null, // prefix to html
formValues: true // preserve input/form values
});
});
</script>
For printThis.js souce code, copy and pase below URL in new tab
https://raw.githubusercontent.com/jasonday/printThis/master/printThis.js
You could use a print stylesheet, but this will affect all print functions.
You could try having a print stylesheet externalally, and it is included via JavaScript when a button is pressed, and then call window.print(), then after that remove it.