Wednesday, 21 September 2016

How to make my div containers movable within an HTML page?

Dear Friends,
Dhurima Blog presents, How to make my div containers movable within an HTML page?
If you Say, it's very Difficult, then you are wrong. It's so easy man. just follow given Steps:
Click for Demo Page

Step 1: Choose where you want to use it. We suppose you want to add  under a Contact Page.
Step 2: If You add this on your Website, then 

  1. First Copy below script and css and paste under head tag.
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    
    <style>
        #divContainer, #divResize { 
            border:dashed 1px #CCC; 
            width:120px; 
            height:120px; 
            padding:5px; 
            margin:5px; 
            font:13px Arial; 
            cursor:move; 
            float:left 
        } 
    </style>
</head>

  1. Now Copy below code and Paste where you want add movable div under Body tag.
    2. <body>
     <div>
            <div id="divContainer"> 
                I am Draggable 
            </div>
            <div id="divResize">
                I am Draggable and Resizable 
            </div>
     </div>
    </body>
     Note: Here is 2 div first for Draggable and second for Draggable and Resizable both. If you want to add only one then just remove another.  
  2. Now Copy below script code and Paste below body Tag and just top of the HTML closing Tag.
    3. <script>
        $(document).ready(function() {
            $(function() { $('#divContainer').draggable(); });
            $(function() { $("#divResize").draggable().resizable(); });
        });
    </script>
    </html>
  3. Save your HTML File and Run your file. That's it for Website.
Step 3: If You add this on your Blogger, then 
  1. Go to Blogger Dashboard --> Click on 'Template' --> Click on 'Edit HTML'
  2. Copy below script and css  link and paste under below of head tag.
    3. <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  3. Now Go to Blogger Dashboard --> Click on 'Template' -->  Click on 'Customise' --> Click on 'Advanced' --> Click on 'Add CSS'. Under the Opened CSS Box, Just Copy and Past Below CSS code. According to your Choice you can Change it.
    4. #divContainer, #divResize { 
                border:dashed 1px #CCC; 
                width:120px; 
                height:120px; 
                padding:5px; 
                margin:5px; 
                font:13px Arial; 
                cursor:move; 
                float:left 
            } 
  4. Now Copy below code and Paste where you want add movable div. You Can Use Add Gadget for it. 
    5.  <div>
            <div id="divContainer"> 
                I am Draggable 
            </div>
            <div id="divResize">
                I am Draggable and Resizable 
            </div>
     </div>
    <script>
        $(document).ready(function() {
            $(function() { $('#divContainer').draggable(); });
            $(function() { $("#divResize").draggable().resizable(); });
        });

    </script>

If You like this Post, Please Like my Blog Comment on this post and Visit my another post. Visit my Facebook Page
That's It
Posted by at No comments:
Labels: , , , ,

Tuesday, 20 September 2016

How to add Clock in your Google Blog.

Hello Friends,
Manish Chaturvedi Blog presents, Digital Clock for your Google Blog. 
If you want to add Digital Clock in your Blog, then you can  easily place the HTML Code and Add like as a Gadget. Just follow the steps.

Step 1: Go to your Blogger Dashboard(go to https://www.blogger.com/ and Login with your Gmail ID and Password.)
Step 2: Select your Blog.
Step 3: Under Dashboard Click on the Layout Tab.
Step 4: After That, Click on 'Add a Gadget' tab.
Step 5: Under Gadget Gallery, Search and Click on 'HTML/JavaScript'.
Step 6: After Clicked on 'HTML/JavaScript' you can see one window like below image.

Step 6: In Opened Window Write 

  1. Title: Digital Clock
  2. Content: Under Content Just Copy paste Digital Clock Code written below:

<script type="text/javascript">
tday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
tmonth=new Array("January","February","March","April","May","June","July","August","September",
"October","November","December");

 function GetClock(){
var d=new Date();
var nday=d.getDay(),nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds(),ap;

 if(nhour==0){ap=" AM";nhour=12;}
else if(nhour<12){ap=" AM";}
else if(nhour==12){ap=" PM";}
else if(nhour>12){ap=" PM";nhour-=12;}

 if(nmin<=9) nmin="0"+nmin;
if(nsec<=9) nsec="0"+nsec;

 document.getElementById('clockbox').innerHTML=""+tday[nday]+", "+tmonth[nmonth]+" "+ndate+", "+nyear+" ; "+nhour+":"+nmin+":"+nsec+ap+"";
}

 window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>

Step 7: After copy paste code just click on save button.  
Step 8: Rearrange your Digital Clock Gadget as you want. 
Step 9: Click on Save arrangement at the Top-Right Corner.
Step 10: Now Open your Website. Look your Website have a Digital Clock.

If You like this Post, Please Like my Blog Comment on this post and Visit my another post. Visit my Facebook Page
That's it.
Posted by at No comments:
Labels:

Monday, 29 August 2016

Find your screen resolution in HTML

Hello friends,
If you want to create any website which screen resolution change according to computer screen resolution which is use by user, then you have to find out what is users screen resolution. Is it so difficult?
If you asked with me, then we can say no, it is not difficult. It is so easy man. 
Just copy paste below Code in Your Page:  

<button onclick="myFunction()">Click to find Now</button>
<p id="width"></p>
<p id="height"></p>

<script>
function myFunction() {
    var x = "Total Width: " + screen.width + "px";
    document.getElementById("width").innerHTML = x;
    var y = "Total height: " + screen.height + "px";
    document.getElementById("height").innerHTML = y;
}</script>

Full Code example:
Here we are sharing full HTML code. just copy this HTML code and Paste it on Notepad.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the total width of your screen, in pixels and the total height of your screen, in pixels.</p>

<button onclick="myFunction()">Click to find Now</button>

<p id="width"></p>
<p id="height"></p>
<script>
function myFunction() {
    var x = "Total Width: " + screen.width + "px";
    document.getElementById("width").innerHTML = x;
    var y = "Total height: " + screen.height + "px";
    document.getElementById("height").innerHTML = y;
}
</script>

</body>
</html>

After That Save it as "screen_resolution.HTML" and Select Save as Type " All Files
Result:
Result of screen resolution

 That's It...

Posted by at No comments:
Labels: , , , , , , , , , , , , , , , , , , ,

Monday, 13 June 2016

How to logging two Sessions on same Windows machine at the same time

1. Download the Universal Termsrv.dll Patch and unzip it.
2. Select UniversalTermsrvPatch-x64.exe for 64bit OS. And Select UniversalTermsrvPatch-x86.exe for 32bit OS.
3. Right click and Run as Administrator


4. Click the Patch button to patch the DLL and click OK on the success window.



5. Restart your machine for the changes to take effect.



Note: you can visit the main website also click here.
Posted by at No comments:

Wednesday, 6 April 2016

How to remove read-only When multiple users open same document?

I have an excel 2007 file sitting in a shared network folder. I only want one user to be able to make changes at a time (any other users would get a read-only). For some reason it currently does not do this, and I have multiple users with the same doc open. I'm concerned that changes will get over-written when 2 people are saving their changes. Can anyone help me with the settings for this.

Step 1: Open Excel file.
Step 2: Press Alt + T, b for open share Workbook window.
Step 3: Please Tick for Allow Changes by more than 1 user at the same time.

Step 4: Click OK.


Thats it...
Posted by at No comments:
Subscribe to: Comments (Atom)

Search on This Blog