Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts
Wednesday, May 14, 2014
Accordion using jQuery
<div id="accordion">
<h3 class="title">First header</h3>
<div class="content">First content panel</div>
<h3 class="title">Second header</h3>
<div class="content">Second content panel</div>
</div>
<style>
.content{display:none;}
</style>
//Type One
<script>
jQuery('#accordion .title').each(function(){
jQuery(this).addClass('active');
jQuery(this).toggle(function(){
jQuery(this).addClass('active').next().slideDown(200);
},function(){
jQuery(this).removeClass('active').next().slideUp(200);
})
});
</script>
//Type Two
<script>
a = jQuery('.footer-menu').find('#accordion .title');
console.log(a.hasClass('active'));
jQuery('#accordion .title').click(function(e){
e.preventDefault();
speed = 300;
if(jQuery(this).hasClass('active') === true) {
} else if(a.hasClass('active') === false) {
jQuery(this).addClass('active').next('.content').slideDown(speed);
} else {
a.removeClass('active').next('.content').slideUp(speed);
jQuery(this).addClass('active').next('.content').delay(speed).slideDown(speed);
}
});
</script>
Labels:
Javascript,
jQuery
Friday, November 29, 2013
Close a div popup after clicking outside it
Remember that jQuery library must be included.
Use following js code
jQuery(document).mouseup(function (event){
var divcontainer = jQuery(".forclose" ); // Object of DIV
if (divcontainer.has(event.target).length === 0){
divcontainer.hide();
}
});
Use following js code
jQuery(document).mouseup(function (event){
var divcontainer = jQuery(".forclose" ); // Object of DIV
if (divcontainer.has(event.target).length === 0){
divcontainer.hide();
}
});
Labels:
Javascript,
jQuery
Sunday, September 8, 2013
W3Schools JavaScript Quiz
W3Schools JavaScript Quiz
1. Inside which HTML element do we put the JavaScript?
You answered:<script>
Correct Answer!
2. What is the correct JavaScript syntax to write "Hello World"?
You answered:document.write("Hello World");
Correct Answer!
3. Where is the correct place to insert a JavaScript?
You answered:Both the <head> section and the <body> section are correct
Correct Answer!
4. What is the correct syntax for referring to an external script called "xxx.js"?
You answered:<script src="xxx.js">
Correct Answer!
5. The external JavaScript file must contain the <script> tag.
You answered:False
Correct Answer!
6. How do you write "Hello World" in an alert box?
You answered:alert("Hello World");
Correct Answer!
7. How do you create a function in JavaScript?
You answered:function myFunction()
Correct Answer!
8. How do you call a function named "myFunction"?
You answered:myFunction()
Correct Answer!
9. How to write an IF statement in JavaScript?
You answered:if (i==5)
Correct Answer!
10. How to write an IF statement for executing some code if "i" is NOT equal to 5?
You answered:if (i != 5)
Correct Answer!
11. How does a WHILE loop start?
You answered:while (i<=10)
Correct Answer!
12. How does a FOR loop start?
You answered:for (i = 0; i <= 5; i++)
Correct Answer!
13. How can you add a comment in a JavaScript?
You answered://This is a comment
Correct Answer!
14. How to insert a comment that has more than one line?
You answered:/*This comment has
more than one line*/
Correct Answer!
15. What is the correct way to write a JavaScript array?
You answered:var txt = new Array("tim","kim","jim")
Correct Answer!
16. How do you round the number 7.25, to the nearest integer?
You answered:Math.round(7.25)
Correct Answer!
17. How do you find the number with the highest value of x and y?
You answered:Math.max(x,y)
Correct Answer!
18. What is the correct JavaScript syntax for opening a new window called "w2" ?
You answered:w2=window.open("http://www.w3schools.com");
Correct Answer!
19. JavaScript is the same as Java.
You answered:False
Correct Answer!
20. How can you detect the client's browser name?
You answered:navigator.appName
Correct Answer!
1. Inside which HTML element do we put the JavaScript?
You answered:<script>
Correct Answer!
2. What is the correct JavaScript syntax to write "Hello World"?
You answered:document.write("Hello World");
Correct Answer!
3. Where is the correct place to insert a JavaScript?
You answered:Both the <head> section and the <body> section are correct
Correct Answer!
4. What is the correct syntax for referring to an external script called "xxx.js"?
You answered:<script src="xxx.js">
Correct Answer!
5. The external JavaScript file must contain the <script> tag.
You answered:False
Correct Answer!
6. How do you write "Hello World" in an alert box?
You answered:alert("Hello World");
Correct Answer!
7. How do you create a function in JavaScript?
You answered:function myFunction()
Correct Answer!
8. How do you call a function named "myFunction"?
You answered:myFunction()
Correct Answer!
9. How to write an IF statement in JavaScript?
You answered:if (i==5)
Correct Answer!
10. How to write an IF statement for executing some code if "i" is NOT equal to 5?
You answered:if (i != 5)
Correct Answer!
11. How does a WHILE loop start?
You answered:while (i<=10)
Correct Answer!
12. How does a FOR loop start?
You answered:for (i = 0; i <= 5; i++)
Correct Answer!
13. How can you add a comment in a JavaScript?
You answered://This is a comment
Correct Answer!
14. How to insert a comment that has more than one line?
You answered:/*This comment has
more than one line*/
Correct Answer!
15. What is the correct way to write a JavaScript array?
You answered:var txt = new Array("tim","kim","jim")
Correct Answer!
16. How do you round the number 7.25, to the nearest integer?
You answered:Math.round(7.25)
Correct Answer!
17. How do you find the number with the highest value of x and y?
You answered:Math.max(x,y)
Correct Answer!
18. What is the correct JavaScript syntax for opening a new window called "w2" ?
You answered:w2=window.open("http://www.w3schools.com");
Correct Answer!
19. JavaScript is the same as Java.
You answered:False
Correct Answer!
20. How can you detect the client's browser name?
You answered:navigator.appName
Correct Answer!
Labels:
Javascript
Tuesday, March 12, 2013
Back To Top on Webpage
1.html
<div id="scroll-to-top" style="display:none">Back to Top</div>
2. JS
<script language="javascript">
jQuery(function() {
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
jQuery('#scroll-to-top').fadeIn();
} else {
jQuery('#scroll-to-top').fadeOut();
}
});
jQuery('#scroll-to-top').click(function() {
jQuery('body,html').animate({scrollTop:0},800);
});
});
</script>
3.CSS
#scroll-to-top {
display:none;
position:fixed;
width:50px;
height:50px;
bottom:30px;
right:30px;
z-index:9999;
text-indent:-9999px;
border-radius:50%;
background-color: #e5e5e5;
}
#scroll-to-top:hover {
background-position:-200px -150px;
background-color:#333;
}
<div id="scroll-to-top" style="display:none">Back to Top</div>
2. JS
<script language="javascript">
jQuery(function() {
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
jQuery('#scroll-to-top').fadeIn();
} else {
jQuery('#scroll-to-top').fadeOut();
}
});
jQuery('#scroll-to-top').click(function() {
jQuery('body,html').animate({scrollTop:0},800);
});
});
</script>
3.CSS
#scroll-to-top {
display:none;
position:fixed;
width:50px;
height:50px;
bottom:30px;
right:30px;
z-index:9999;
text-indent:-9999px;
border-radius:50%;
background-color: #e5e5e5;
}
#scroll-to-top:hover {
background-position:-200px -150px;
background-color:#333;
}
Labels:
html,
Javascript
Tuesday, November 6, 2012
show plain text in a password field and then make it a regular password field on focus
Use html as
<input type="text" value="password" id="password">
And use script
jQuery( document ).ready( function(){
jQuery( document ).delegate( "#password", "focusin focusout",
function(e){
var elm = jQuery( "#password" )[0];
if( e.type == "focusin" && elm.type == "text" ) {
jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", type:"password", value:"" } ) );
jQuery( "#password")[0].focus();
}
else if( e.type =="focusout" && elm.type == "password" && !elm.value ) {
jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", type:"text", value:"password" } ) );
}
}
);
});
<input type="text" value="password" id="password">
And use script
jQuery( document ).ready( function(){
jQuery( document ).delegate( "#password", "focusin focusout",
function(e){
var elm = jQuery( "#password" )[0];
if( e.type == "focusin" && elm.type == "text" ) {
jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", type:"password", value:"" } ) );
jQuery( "#password")[0].focus();
}
else if( e.type =="focusout" && elm.type == "password" && !elm.value ) {
jQuery( elm ).replaceWith( jQuery( "<input>", {id: "password", type:"text", value:"password" } ) );
}
}
);
});
Labels:
html,
Javascript
Wednesday, October 3, 2012
Magento : lazyloading in catloag page
Download lazyload js from below link
http://www.appelsiini.net/projects/lazyload
And save in js/lazyload/jquery.lazyload.js
Then create lazyload.phtml in template/lazyload/lazyload.phtml with following code
<script type="text/javascript" charset="utf-8">
jQuery("img").load(function(){if(jQuery(this).attr("src")!=="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>blank.png"){jQuery(this).removeAttr("height")}});
jQuery(function() {
jQuery("img").lazyload({
effect : "fadeIn",
});
});
</script>
And add following code in catalog.xml
<reference name="head">
<action method="addJs"><script>jquery.lazyload.min.js"></script></action>
</reference>
<reference name="after_body_start">
<block type="core/template" template="lazyloader/lazyload.phtml" name="lazyloader_init" />
</reference>
Remember that jquery must be included in site.
http://www.appelsiini.net/projects/lazyload
And save in js/lazyload/jquery.lazyload.js
Then create lazyload.phtml in template/lazyload/lazyload.phtml with following code
<script type="text/javascript" charset="utf-8">
jQuery("img").load(function(){if(jQuery(this).attr("src")!=="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_MEDIA); ?>blank.png"){jQuery(this).removeAttr("height")}});
jQuery(function() {
jQuery("img").lazyload({
effect : "fadeIn",
});
});
</script>
And add following code in catalog.xml
<reference name="head">
<action method="addJs"><script>jquery.lazyload.min.js"></script></action>
</reference>
<reference name="after_body_start">
<block type="core/template" template="lazyloader/lazyload.phtml" name="lazyloader_init" />
</reference>
Remember that jquery must be included in site.
Labels:
Javascript,
Magento
Wednesday, September 19, 2012
Magento: Add google translator in website
Add following script in any template file
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Labels:
Google,
Javascript,
Magento
Monday, September 17, 2012
Show More /Less link using jQuery
Sample text:
<div class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum laoreet, nunc eget laoreet sagittis,quam ligula sodales orci, congue imperdiet eros tortor ac lectus.Duis eget nisl orci. Aliquam mattis purus non maurisblandit id luctus felis convallis.Integer varius egestas vestibulum.Nullam a dolor arcu, ac tempor elit. Donec.</div>CSS: a {color: #0254EB}a:visited {color: #0254EB}a.morelink {text-decoration:none;outline: none;}.morecontent span {display: none;}.comment {width: 400px;background-color: #f0f0f0;margin: 10px;}Javascript:$(document).ready(function() {var showChar = 100;var ellipsestext = "...";var moretext = "more";var lesstext = "less";$('.more').each(function() {var content = $(this).html();if(content.length > showChar) {var c = content.substr(0, showChar);var h = content.substr(showChar, content.length - showChar);var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span> <a href="" class="morelink">' + moretext + '</a></span>';$(this).html(html);}});$(".morelink").click(function(){if($(this).hasClass("less")) {$(this).removeClass("less");$(this).html(moretext);} else {$(this).addClass("less");$(this).html(lesstext);}$(this).parent().prev().toggle();$(this).prev().toggle();return false;});});
Labels:
Javascript
Wednesday, August 8, 2012
Object Expected error in Internet Explorer
This error usually happens in the following scenario. An HTML file contains an inline JavaScript to load remote.js and call a function in remote.js
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
//]]>
</script>
And in the file remote.js:
remoteFunction code.....
You would expect the output in this order:
Before loading remote.js
After loading remote.js
In remote function
IE gives an error message "Object Expected" because it calls the function remoteFunction() prematurely. It calls before loading the file remote.js, which contain the declaration of remoteFunction(). This is another unexpected behavior from IE. Fortunately, it can be corrected by adding the attribute defer="defer" to second script invocation. This will specifically prevent IE from executing in order to give a correct output. Other browsers are not affected by the change.
<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
//]]>
</script>
And in the file remote.js:
remoteFunction code.....
You would expect the output in this order:
Before loading remote.js
After loading remote.js
In remote function
IE gives an error message "Object Expected" because it calls the function remoteFunction() prematurely. It calls before loading the file remote.js, which contain the declaration of remoteFunction(). This is another unexpected behavior from IE. Fortunately, it can be corrected by adding the attribute defer="defer" to second script invocation. This will specifically prevent IE from executing in order to give a correct output. Other browsers are not affected by the change.
Labels:
Javascript
Subscribe to:
Comments (Atom)