Wednesday, 10 May 2017

Make div 100% height of browser window

How can this be used to make a divider fill the height of the browser?


For this question, we can make use of vh: 1vh is equal to 1% of the viewport's height. That is to say, 100vh is equal to the height of the browser window, regardless of where the element is situated in the DOM tree:

HTML
<html>
<head>
<title>Make div 100% height of browser window <title>
</head>
<div> </div>
<html>

CSS
<style>
div {
    height:100vh;
background:#ddd;
}
</style>
Posted by at No comments :

Tuesday, 18 April 2017

How to change the color of header bar and address bar in mobile (Responsive )

You need to add a <meta> tag in your <head> containing name="theme-color", with your HEX code as the content value.   For example:
<meta name="theme-color" content="#999999" />



You actually need 3 meta tags to support Android, iPhone and Windows Phone


<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#4285f4">
Posted by at No comments :

Monday, 10 April 2017

BOOTSTRAP GALLERY CODE

HTML CODE  HERE 


<div class="row">

    <div class="col-lg-12">
        <h1 class="page-header">Thumbnail Gallery</h1>
    
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
                <img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
            </a>
        </div>
            <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
                <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">
            </a>
        </div>
</div>


<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="image-gallery-title"></h4>
            </div>
            <div class="modal-body">
                <img id="image-gallery-image" class="img-responsive" src="">
            </div>
            <div class="modal-footer">

                <div class="col-md-2">
                    <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                </div>

                <div class="col-md-8 text-justify" id="image-gallery-caption">
                    This text will be overwritten by jQuery
                </div>

                <div class="col-md-2">
                    <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                </div>
            </div>
        </div>
    </div>
</div>


JS CODE HERE 

$(document).ready(function(){

     loadGallery(true, 'a.thumbnail');

     //This function disables buttons when needed
    function disableButtons(counter_max, counter_current){
        $('#show-previous-image, #show-next-image').show();
        if(counter_max == counter_current){
            $('#show-next-image').hide();
        } else if (counter_current == 1){
            $('#show-previous-image').hide();
        }
    }
    function loadGallery(setIDs, setClickAttr){
        var current_image,
            selector,
            counter = 0;

         $('#show-next-image, #show-previous-image').click(function(){
            if($(this).attr('id') == 'show-previous-image'){
                current_image--;
            } else {
                current_image++;
            }

             selector = $('[data-image-id="' + current_image + '"]');
            updateGallery(selector);
        });

         function updateGallery(selector) {
            var $sel = selector;
            current_image = $sel.data('image-id');
            $('#image-gallery-caption').text($sel.data('caption'));
            $('#image-gallery-title').text($sel.data('title'));
            $('#image-gallery-image').attr('src', $sel.data('image'));
            disableButtons(counter, $sel.data('image-id'));
        }

         if(setIDs == true){
            $('[data-image-id]').each(function(){
                counter++;
                $(this).attr('data-image-id',counter);
            });
        }
        $(setClickAttr).on('click',function(){
            updateGallery($(this));
        });
    }

});

Posted by at No comments :

Sunday, 26 March 2017

how to make a search form with multiple search options in php

Suppose These are fields:-

$user_name = $_POST[‘user_name’]$city = $_POST[‘city’]

Take a variable:-

$sql = ‘SELECT * FROM USER_TABLE WHERE 1=1’;

(i)   Now if user fills something in user_name:-

If(!empty($user_name))Then :-$sql = $sql . ‘AND user_name = ’.$user_name;

(ii) Now if user fills something in city:-

If(!empty($city))Then :-$sql = $sql . ‘AND city = ’.$city;And then run this query :- mysql_query($sql) 
Posted by at No comments :

Thursday, 9 March 2017

Equal height js

equalheight = function (container) {

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;
$(container).each(function () {

$el = $(this);
$($el).height('auto')
topPostion = $el.position().top;

if (currentRowStart != topPostion) {
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);
} else {
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
}
for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}
});
}

.... add your  class .... 

 $(window).load(function () {
equalheight('.equal .pray');
});
$(window).resize(function () {
equalheight('.equal .pray');
});
Posted by at No comments :

Saturday, 4 February 2017

Jquery events not working on ajax loaded content

It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because .header isn't on the page on the page when it's loaded. So no event is attached.
Your code should look some along the lines of this:

$('body').on('click','.heading',function(){
     $(this).css('color','red');  
});
It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of .heading.
Posted by at No comments :
Subscribe to: Comments ( Atom )