My Information: Jquery

Showing posts with label Jquery. Show all posts

Monday 24 August 2015

Show Hide divs using Next Previous Button using Jquery

Hello,

You want to Make Show And Hide Your div content using jquery. Next and Previous.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<title>Next Previous button</title>
<script type="">
$(document).ready(function(){

$(".alldivs div").each(function(e) {
if (e != 0)
$(this).hide();
});

$("#next").click(function(){
if ($(".alldivs div:visible").next().length != 0)
$(".alldivs div:visible").next().show().prev().hide();
else {
$(".alldivs div:visible").hide();
$(".alldivs div:first").show();
}
return false;
});

$("#prev").click(function(){
if ($(".alldivs div:visible").prev().length != 0)
$(".alldivs div:visible").prev().show().next().hide();
else {
$(".alldivs div:visible").hide();
$(".alldivs div:last").show();
}
return false;
});

});
</script>
</head>

<body>

show hide divs using Next Previous button using jQuery
<div class="alldivs">
<div class="slide1">Slide 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide2">Slide 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide3">Slide 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide4">Slide 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide5">Slide 5 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide6">Slide 6 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide7">Slide 7 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide8">Slide 8 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide9">Slide 9 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide10">Slide 10 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide11">Slide 11 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
<div class="slide12">Slide 12 Lorem Ipsum is simply dummy text of the printing and typesetting industry. </div>
</div>
<a id="next">next</a>
<a id="prev">prev</a>

</body>
</html>

Thursday 6 August 2015

Add Jquery Datepicker 6 Month Plus From Current Date Example

Hello,

Some time you want to add that you can display date from current to 6 month any other month
and other are disable than i have do in my example. you can set maxDate parameter in you
datepicker. if you want to disable current before all date then set minDate:'0' you can check
below example i think it can help you. remove all parameter than it will display simple datepicker.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate:'0',maxDate: '+6m' });
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"/></p>

</body>
</html>

Please check that example and see it it can use full.

Tuesday 9 June 2015

Email Already Exit Using Jquery And Php

Hello All,

I am Simple Learn How to check email already exit. I am create code and check if

email already exit then you cannot submit and also also validation of email.

I am give the code for that you can check it and use it.

you have to create to file

1)email.php
2)check.php

in your email.php wriite this code

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$("#myform").submit(function(){

if(!emailok)
{
alert('check your email');
return false;
}

});
$('#email').blur(function(){
alert($('#email').val());
$.ajax({
type:"post",
data:"email="+$('#email').val(),
url:"check.php",
beforeSend:function(){
$("#email_info").html("checking email...");
},
success:function(data){

if(data == "invalid"){
$("#email_info").html("check your Email");

emailok = false;
}else if(data !="0"){
$("#email_info").html("email already exit");

}else{
emailok = true;
$("#email_info").html("email ok");
}

}

});

});
});
</script>
<form id="myform" method="post">
<input type="text" id="email" name="email"/>
<input type="submit" />
</form>
<div id="email_info"></div>

second file is check.php

add this code

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(! $conn )
{
die('Could not connect: ' . mysql_error());
}

mysql_select_db('blog',$conn);

$email = $_POST['email'];

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {

$sql = mysql_query('select email from email where email="'.$email.'"' );

$result = mysql_fetch_array($sql);

echo $num = mysql_num_rows($sql);
}else{

echo "invalid";
}

mysql_close($conn);
?>

table code

--
-- Table structure for table `email`
--

CREATE TABLE IF NOT EXISTS `email` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`email` varchar(200) NOT NULL,
`password` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `email`
--

INSERT INTO `email` (`id`, `email`, `password`) VALUES
(1, 'test@gmail.com', 'test'),
(2, 'teset@gmail.com', 'test');

Friday 5 June 2015

Convert String To Title Case With Jquery And Title Case Microsoft Office

Hello All,

This My learn how to change title case using jquery. I am also Learn that how to
change title case in MsOffice.

When I have Text TO HAVE A CLEAR AND FOCUSSED CONTENT in MsOfiice

I am want to change it into To Have A Clear And Focussed Content. I have no Idea

about that. I am also don't what to say in MsOffice that's I want to make code in jquery.

I have change manually but I thought if I have many of text that I do code. I also Find instruction

in Msoffice.

It That

Select the text you want to alter.
Press Shift+F3. Word changes the case of the selected text.
Continue pressing Shift+F3 until the case is the way you want it.

When First i select text TO HAVE A CLEAR AND FOCUSSED CONTENT and press shift+f3

it make it Small. after again press Shift+f3. Then Get this text To Have A Clear And Focussed Content.

So I think When Get code Also using Jquery then I Will Put here and try some one

who can khow developing.

$(document).ready(function(){

var text = $('.capitalize').text();

var ti = toTitleCase(text);

$('.capitalize').empty();

$('.capitalize').append(ti);

function toTitleCase(str)

{

return str.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});

}

});

</script>

TO HAVE A CLEAR AND FOCUSSED CONTENT

</div>

in div you can put your text and check in your browser you can get output.

Monday 25 May 2015

Color Image Swicher in Magento

Hello Friends,

One site i see that when click on image icon in then change image color.
i am searching that any extension in magneto but mostlly find paid.

then i am try to make simple image swicher or color swicher in magneto.

Check it my code that can help it.

GoTo Admin->manageproduct->addnewproduct(or edit product).

Check Below image we can create custom option in product. here check image for it.

Step1 : Create custom option

Step2: Add Image and also give the label to images

After your current theme header.phtml file.

add this script in this your header.phtml

<script type="text/javascript">
jQuery(document).ready(function() {

jQuery("#select_3").change(function() {
var optionValueText = jQuery.trim(jQuery('#select_3 :selected').text());
if(optionValueText != "-- Please Select --")
{
alert("#image" + optionValueText);
var image = "image" + optionValueText;
jQuery("."+image+".cloud-zoom-gallery").trigger('click');
jQuery("#image" + optionValueText).show();
}
});

});
</script>

in this script comment alert.

also check id of selectbox

I am added Moo_Cloudzoom Extention for so you can added it.

Here it's Media.phtml file it path is in template\moo\catalog\product\view\

Here replace this code.

foreach ($galleryImages as $_image) {
$id = $this->htmlEscape($_image->getLabel());
$gallery .= '<a id="cloud-zoom-gallery' . $i . ' " href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
. 'rel="useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery image'.$id.'" title="' . $this->htmlEscape($_image->getLabel()) . '">'
. '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56) . '" width="56" height="56" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
. '</a>';
}

In this i am added on $id. here I am getting image label. this is added in class in a tag.

i am making with back color. this code added in your media.phtml file. check it
the output.

I am adding after addind code you can change selectbox color value you can change color of image

Sunday 17 May 2015

Remove Image Title In Wordpress

Hello All,

Some Time you have requirement to remove image title in wordpress site.
but you added lots of image and also if you can change manully then it so
long work.

when yon remove image title content. you can use this code and check it.

it's only change when you added image in wordpress editor. but when you can
create plugin on use any plugin in when added image title that can not remove that.
there you can use simple Jquery

Use AnD Remove Image Title In Content Filter check below code.

This code added in you current theme functions.php also you can create plguin for it

add_filter('the_content', 'remove_images_titles');
function remove_images_titles($text) {

    // Get all title="..." tags from the html.
    $result = array();
    preg_match_all('|title="[^"]*"|U', $text, $result);

    // Replace all occurances with an empty string.
    foreach($result[0] as $img_tag) {
        $text = str_replace($img_tag, '', $text);
    }

    return $text;
}

But you can remove image title in all wordpress site follow simple jquery and

check result

jQuery(document).ready(function($) {
$("img").removeAttr("title");
}

this code added in your header.php after added all script in wrdpress.

refresh your site check it using firebug it can be remove image title.

please tell me this can be helpfull or not? comment Please?

Friday 1 May 2015

Parallax Scroll and Back to Top Using Jquery

Hello

Here you can create parallax scroll and back to top using jquery.

just you can add jquery in your html

download https://jquery.com/download/ here

i am write script here give smaple code then check it your html

here sample code

https://drive.google.com/file/d/0BwNaFGxzigBuZVpPaGYtZGl0RGc/view?usp=sharing

please check it

here i add simple jquery scripy

gt;

jQu

ery( document ).ready(function() {

jQuery('.tryitbtn a').click(function() {

if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

var target = $(this.hash);

target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

if (target.length) {

$('html,body').animate({

scrollTop: target.offset().top

}, 1000);

return false;

}

});

jQuery('a.back_t').click(function () {

//alert('hi');

jQuery('body,html').animate({

scrollTop: 0

}, 800);

return false;

});

})

;

script>

Wednesday 15 April 2015

create custom loader in jquery and css

Wednesday 25 March 2015

How to get base url and go back facility in php

Here for very normal code for that

just get base url then you can try this code

<?php echo "http://" . $_SERVER['SERVER_NAME'] .

$_SERVER['REQUEST_URI']; ?>

try i think it's working for you and you want create go back

<a href="#" onclick="window.history.back();">Go Back

this two for php very usefull check it suggest me.

Thursday 15 January 2015

How to pass value from Javascript to php variable on the second page?

hello

How to pass value from Javascript to php variable on the second page?

I am giving example of how pass value using javascript.

create .php file like demo.php write to code

change Collation as utt8_general_ci.

My Information

Pages

Monday 24 August 2015

Show Hide divs using Next Previous Button using Jquery

Thursday 6 August 2015

Add Jquery Datepicker 6 Month Plus From Current Date Example

Tuesday 9 June 2015

Email Already Exit Using Jquery And Php

Friday 5 June 2015

Convert String To Title Case With Jquery And Title Case Microsoft Office

Monday 25 May 2015

Color Image Swicher in Magento

Sunday 17 May 2015

Remove Image Title In Wordpress

Friday 1 May 2015

Parallax Scroll and Back to Top Using Jquery

Parallax Scroll and Back to Top Using Jquery

Wednesday 15 April 2015

create custom loader in jquery and css

Wednesday 25 March 2015

How to get base url and go back facility in php

How to get base url and go back facility in php

Thursday 15 January 2015

How to pass value from Javascript to php variable on the second page?

How to pass value from Javascript to php variable on the second page?

Wednesday 24 December 2014

separate sentences (paragraph) using pipeline by dots using javascript and html

Sunday 5 October 2014

multiple checkbox select with javascript and getting checkbox Value using php

Tuesday 30 September 2014

PHP output JSON Web Service charset UTF-8 get multi languange data like hindi,franch