• 0

Make a floating div tag in Javascript.


Question

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.

4 answers to this question

Recommended Posts

  • 0

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?

  • 0
  On 16/08/2013 at 08:59, JonnyLH said:

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

  • 0
  On 16/08/2013 at 09:34, illage3 said:

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.

This topic is now closed to further replies.
  • Posts

    • I have the money, so I could've done that, but I also just spent nearly $2700 [Canadian] on a laptop, so I wanted to save money.
    • I wonder how would this machine perform with Linux on it, like Ubuntu or Fedora?
    • Mass Image Compressor 4.0.2 by Razvan Serea Mass Image Compressor is a fast and easy-to-use Windows app that helps you compress, resize, and convert large sets of images quickly. The tool supports various formats including JPEG, PNG, WebP, AVIF, and GIF (including animated images), and offers precise control over output quality, image dimensions, and file naming schemes. You can reduce file sizes while keeping good quality, change image dimensions, and rename files in batches. Users can filter or preserve metadata such as EXIF, IPTC, and XMP—including selectively removing GPS or serial number information. With features like drag-and-drop, Explorer integration, multiple output folder options, and lossless optimization tools like OxiPNG and pngquant, Mass Image Compressor is ideal for photographers, designers, and developers. Features Compress multiple folders and files in one go (including optional subfolders) Seamless Windows Explorer integration via the "Send To" menu Advanced metadata copy settings (EXIF, XMP, IPTC) with filtering (e.g., strip GPS, serial numbers) Full support for Animated Images (GIF, PNG, WebP) Output to modern formats like WebP and AVIF Regex filters for filenames and size-based exclusions Suffix/Prefix options and filename text replacement for output files Powerful Preview UI with pixel-level image comparison (CTRL + T) Robust and faster RAW image support Multiple flexible output destination modes: Replace original files Output to specific folder Store next to original with suffix/prefix Inside a Compressed subfolder Flexible resizing: By percentage Long edge, fixed width/height Frame-based for print or responsive image sets (1x/2x/3x) Mass Image Compressor 4.0.2 release notes: Major Release: 4.x Series Rewritten from the ground up Complete rewrite using a modern architecture for improved scalability, performance, and responsive UI. Expanded format support: Input: JPG, PNG, WebP, TIFF, GIF, BMP, AVIF, HEIC, JP2, RAW (ARW, DNG, NEF, CR2, CR3, CRW, DCR, KDC, MRW, ORF, RAF, PEF, RW2, SRW, ERF, 3FR, MOS, MEF). Output: JPG, PNG, WebP, AVIF, GIF. New features: Animated image handling (e.g., animated WebP and GIF) Side-by-side preview for compression comparison File filters by extension, size, and visibility Multi-file drag and drop Gallery view modes for better browsing Rich compression settings (quality, resizing strategies, naming rules) Flexible output management (replace originals, custom folders, or preserve structure) Smart conflict handling with detailed warnings Throttled task scheduling for smoother UI Improved metadata support with options to preserve or exclude (e.g., GPS, camera info) Dependency Updates & Stability Magick.NET-Q8-OpenMP-x64 updated from 14.5.0 to 14.7.0 (resolves hang and security issues) Microsoft App SDK updated from 1.6.250108002 to 1.7.250606001 (stability improvements) Download: Mass Image Compressor 4.0.2 | 81.9 MB (Open Source) Download: Mass Image Compressor Portable | 114.0 MB View: Mass Image Compressor Home Page | Github | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • I wasn't mad. Sorry if I made it sound like that. Everyone is different. PERIOD.
  • Recent Achievements

    • One Year In
      Schwarzenbach earned a badge
      One Year In
    • Collaborator
      NullReference earned a badge
      Collaborator
    • Dedicated
      John Volks earned a badge
      Dedicated
    • One Month Later
      KenKay earned a badge
      One Month Later
    • Week One Done
      KenKay earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      663
    2. 2
      ATLien_0
      250
    3. 3
      Xenon
      178
    4. 4
      neufuse
      153
    5. 5
      +FloatingFatMan
      126
  • Tell a friend

    Love Neowin? Tell a friend!