Ads 468x60px

Labels

Showing posts with label Jquery. Show all posts
Showing posts with label Jquery. Show all posts

Friday, January 22, 2016

Get current URL in Jquery and JavaScript.


Get current URL in Jquery and JavaScript?
My url is http://www.rohitazad.com:4545/index.php#tab5?foo=890

In Jquery
Property     Result
______________________________________________

host     www.rohitazad.com:4545

hostname     www.rohitazad.com

port     4545

protocol     http:

pathname     index.php

href     http://www.rohitazad.com:4545/index.php#tab5

hash     #tab5

search     ?foo=890

var locationWindow = $(location).attr('property');
In JavaScript
window.location.host     www.rohitazad.com:4545

window.location.hostname     www.rohitazad.com

window.location.port     4545

window.location.protocol     http:

window.location.pathname     index.php

window.location.href     http://www.rohitazad.com:4545/index.php#tab5

window.location.hash     #tab5

window.location.search     ?foo=890

Friday, January 8, 2016

How to create a element in jquery ?


Hi it's very simple download to jquery plugin and write some code Define a variable assign to value as like this
Jquery Code here
$(document).ready(function(){
// Create a HTML Tag Code here start
var newDiv = document.createElement('div');
$(newDiv).addClass('wraper');
$(newDiv).attr('data-role','wraperDivAttribute');
$(newDiv).html('This is wraper section');

$(newDiv).appendTo($("body")) ;// wraper div append to body
// Create a HTML Tag Code here end
});




Monday, July 6, 2015

How to create Accordion in simple jQuery code .

How to create Accordion in simple  jQuery code .

It's very simple now create simple html code and apply this simple jquery code as like this

HTML Code here
<div id="accordion">
    <h2><a href="#">Accordian Tab 1</a></h2>
    <div>
      <p>Accordian Tab 1 Data</p>
    </div>
    <h2><a href="#">Accordian Tab 2</a></h2>
    <div>
      <p>Accordian Tab 2 Data</p><br />
    </div>
    <h2><a href="#">Accordian Tab 3</a></h2>
    <div>
      <p>Accordian Tab 3 Data</p>
    </div>
    <h2><a href="#">Accordian Tab 4</a></h2>
    <div>
      <p>Accordian Tab 4 Data</p>
    </div>
  </div>
Css Code here
body {
  font-family: arial;
  font-size: 12px;
}
#accordion h2 {
  padding: 10px;
  margin: 0;
  border: 1px solid #4679bd;
  background-color: #4072b4;
  font-size: 14px;
  border-top: 3px solid #ccc;
}
#accordion h2 a {
  text-decoration: none;
  color: #ffffff;
}
#accordion div {
  padding: 0 10px;
  margin: 0;
  border: 1px solid #4679bd;
  color: #000;
}
Jquery Code here
$(document).ready(function() {
  $("#accordion div").hide();
  $("#accordion h2").click(function() {
    $(this).next("#accordion div").slideToggle("slow").siblings("#accordion div").slideUp("slow");
  });
});
Demo Jsfiddle

Friday, March 21, 2014

Section have a fixed position when it hits the top of the screen

How to do this it's very simple here example see below .
Jquery Code
var oritop = -100;
$(window).scroll(function() {
var scrollt = $(this).scrollTop();
var elm = $(".scrollTopWindow");
if(oritop < 0) {
oritop= elm.offset().top;
}
if(scrollt >= oritop) {
elm.css({"position": "fixed", "top": 0, "left": 0});
}
else {
elm.css("position", "static");
}
});
Css here code as Sample
body{height:2000px}
.scrollTopWindow {
background-color: red;
width: 150px;
height: 100px;
color: white;
padding:20px;
}
HTML Code here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
Some Content here
<div class = "scrollTopWindow"> Scroll top window and fix me ! </div>

Demo Jsfiddle

Wednesday, March 5, 2014

How to create a tooltips with jQuery

simple idea to create a tooltips
HTML
<input type="text" title="Here put your toottips text " />
CSS
.autoSugest{background:#fffdef;border:1px solid #cac6ad;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;color:#7f7943;
display:none;
font-size:12px;
padding:7px 15px;
position:absolute;
min-width:100px;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
.autoSugest:after{
content:url("../../images/tootl-tip-arrow.png"); height:8px;
width:11px;
position:absolute;
top:-13px;
left:38px}
Jquery
$.fn.autoSuggest = function(){ return this.each(function(index, elm){
if(!$(elm).is('[data-title]')){
$(elm).attr('data-title', $(elm).attr('title')).attr('title', '');
};

$(elm).on('focus', function(){
var element = $(this),
posTop = element.offset().top + element.outerHeight() + 10,
posLeft = element.offset().left,
toolTipWidth = element.outerWidth() > 90 ? element.outerWidth() : 250,
titleText = element.attr('data-title');
if(titleText && titleText != ''){
$('<div />', {class: 'autoSugest', text : titleText, css : {left: posLeft, top: posTop, maxWidth: toolTipWidth}}).appendTo('body').fadeIn();
}else{
return false;
}
});
$(elm).on('blur', function(){
$('.autoSugest').fadeOut(function(){
$(this).remove();
});
});
}); };
$(document).ready(function(){
    $('input[title]').autoSuggest(); });
 

Tuesday, July 9, 2013

One Click Select all Checkbox in Jquery


HTML
<label for="selectAll"><input type="checkbox" id="selectAll"> Select all</label>

<label for="ceckbox_1"><input type="checkbox" id="ceckbox_1" class="selectbox">Checkbox One</label>

<label for="ceckbox_2"><input type="checkbox" id="ceckbox_2" class="selectbox">Checkbox Two</label>

<label for="ceckbox_3"><input type="checkbox" id="ceckbox_3" class="selectbox">Checkbox Three</label>
Jquery
    $(document).ready(function(){
        $('#selectAll').on('click', function(){
            $('.selectbox').attr('checked', $(this).is(":checked"));
        });
    });

Demo Link