• 0

Make a floating div tag in Javascript.

Asked by illage3,

 Share

Question

Proficient

illage3

Posted
Posted

Hey,

 

Is it possible to make a floating div tag appear in the top right corner of a page when someone clicks a button?  I want to place a Google Custom search in there so I can add it to a website I'm developing for work.

 

Thanks.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0
Mentor

JonnyLH

Posted
Posted

Do something like (using JQuery):

var divHeight = 50;
var divWidth = 50;

function floatingDiv(parent) {
	if(!parent) ? parent = "body";
	x = window.innerWidth-divWidth;
	jQuery('<div/>', {
	    id: 'floating',
	    text: '<HTML HERE>',
	    style: 
	    	'position:fixed;'+
	    	'top:0px;'+
	    	'left:'+x+'px'+
	    	'width:'+divWidth+'px'+
	    	'width:'+divHeight+'px'
	}).appendTo(parent);
}

That function will create a div and append it to a parent class, if none specified it'll attach it to the body. That what you looking for?

Link to comment
Share on other sites
  • 0
Proficient

illage3

Posted
  • Author
Posted

Do something like (using JQuery):

var divHeight = 50;
var divWidth = 50;

function floatingDiv(parent) {
	if(!parent) ? parent = "body";
	x = window.innerWidth-divWidth;
	jQuery('<div/>', {
	    id: 'floating',
	    text: '<HTML HERE>',
	    style: 
	    	'position:fixed;'+
	    	'top:0px;'+
	    	'left:'+x+'px'+
	    	'width:'+divWidth+'px'+
	    	'width:'+divHeight+'px'
	}).appendTo(parent);
}

That function will create a div and append it to a parent class, if none specified it'll attach it to the body. That what you looking for?

I need something that I can use in the <script> tag

Link to comment
Share on other sites
  • 0
Mentor

JonnyLH

Posted
Posted

I need something that I can use in the <script> tag

You can? It's just JS. Wrap it in a script tag and call it with something like

$(window).ready(function() {
   $("#clickDiv").click(floatingDiv);
});

Have that in the same script tag and create a div with that ID. Once you click it, it should create a floating div.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing