How to create a centered popup of an element on another page - javascript

I come from a C# background so bear with me I already know the way I'm going about this isn't ideal:
But I need to do this:
Create a centered popup that scrolls with the page when the user clicks on some text the code must be embedded JavaScript in a HTML page(s), nothing server side (other than maybe css).
-preferably text links to popups need to be reusable I don't want to embed a bunch of code each for each link.
-I've looked at a lot of "pop-up" tutorials/exmaples but since I need embedded client side javascript it limits what works.
The result I would like to have a webpage with premade popups that I can reference from other webpages like OpenPopup(webpage.getElement(popupNumber12)) or have arrays with popup titles, descriptions that I can pass though.

Sounds like you're looking have to a modal rather than a popover since you don't want it to close after interacting with the page. I would just have a modal open with an onClick event and then describe its position as:
.modal {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
}
Assuming the width of the modal you want to display is 300px.
If you're working with SCSS
$width = 300px
$height = 300px
.modal {
width: $width;
height: $height;
position: absolute;
left: calc(50% - $width)
top: calc(50% - $height)
}

Related

How do I make a on site pop up?

I have an adblock script on my site, that registers, when people uses adblock. My problem is now, that I want a pop up to appear on the site, when it finds a user with adblock. The "hard" about this, is that I don't want a regular pop up, like this:
var w = window.open('', '', 'width=350,height=100,resizeable,scrollbars');
w.document.write('text');
w.document.close();
This code ends up as a "regular" pop up.
I want a on the site pop up, if you know what i mean.
I have an example of it here.
You are looking to create a modal dialog.
You can use any modal library by searching for "modal javascript" on your favorite search engine. A few have mentioned interesting libraries in the comments on your question.
Making your own modal is also easy:
Create the <div> with the content you want and give it a style such as:
.modal {
display: none;
position: fixed;
width: 350px;
height: 100px;
margin-top: -50%;
margin-left: -50%;
top: 50%;
left: 50%;
background-color: #FFF;
/* ... */
}
Instead of the code you show above, simply call $(elt).show() if you are using jQuery, or elt.style.display="block"; in pure DOM js.

Make iframe expand/collapse

I have several apps inside iframes in the page that consolidates the apps (it acts as an app container).
I want to add a button somewhere that can expand and collapse the iframes to full size of the page.
The app now has a menu, header, footer, etc. and the application in iframe. When the user clicks say "+" button I want to expand the iframe to the full page and make everything else invisible. When they click it again I want to return to original size.
Maybe there is already something written that can make this happen, I tried to do some js on iframes and it seems hard to write browser independent code.
I can't use HTML5 since we need to support IE7.
An example.
Basically, just give your expanded iframe these CSS attributes,
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
and it will fill its (relative) parent.
Source: "Full screen" <iframe>
You can use either traditional JS or jQuery to achieve this. jQuery is a JS library that is meant to allow cross-browser DOM handling in a sane way.
If I were you, I might code it as (using jQuery):
$('iframe#myid').click(function() {
$('iframe#' + current).removeClass('current');
$('iframe#myid').addClass('current');
var current = '#myid';
});
with the CSS code as:
body, iframe {
margin: 0px; //to normalize the default stylesheet applied by the browser
}
iframe.current {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999;
}

How do website create a Horizontal Bar at Bottom of Page

I have visited some sites where when I scroll half a page, a semi-transparent horizontal column of 100-150px height appears right at the bottom of the page with an image on the left and some message, links on the right.
How can I create it?
Its just a css rule.
#footer {
position: fixed;
bottom: 0px;
margin-right: auto;
margin-left: auto;
}
Using Chrome, click CTRL-SHIFT I, then click on the magnifying glass in the bottom left-hand corner to inspect the element. That's the best way to see how they did it on the site you're looking at.
In IE, F12 gives you the Developer Tools, where the arrow selector tool does the same job. In Firefox, use Firebug.
Then just copy their HTML. And Javascript too if necessary.
Use an element with a style similar to following:
#footer {
opacity: 0.7;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
background-color: #330000;
}
and then lay things inside it as you wish.

My element display at different position on different window size. How to fix the position?

Take a look at my website: http://homegym.sg/index.php/weight-tree-rack.html
If you mouseover the "more view" words under the product image, an additional images box will appear. Normally it's appearing normally in the center. However when i make my window size smaller, the position of the box will change.
I am using slideviewerpro script and i believe it is the one positioning the box but i am not able to tackle the problem. Here is the source of the script: http://homegym.sg/skin/frontend/default/electronics01-black/js/jquery.slideViewerPro.1.0.js
I believe the additional image box is in div#thumbSlider, have did some try and error modification of the js file but failed to solve the problem.
Ok. First of all, your div with width:660px; in product-img-box needs to have position:relative; added to it. Then you need to change the following rule
.product-view .product-img-box #ui0 {
position: absolute;
top: 600px;
left: 580px;
height: 60px;
}
to
.product-view .product-img-box #ui0 {
position: absolute;
height: 60px;
left: 50%;
margin-left: -200px;
margin-top: 15px;
}
widgets.css:589
And then just tweak from there. :)

Creating an overlay in CSS?

I have div that I display dynamically when certain conditions arise.
When I display the div, how can I create the effect of the background dimming and my div appearing to be prominent? much like a number of AJAX lightboxes or popups. (Thickbox, ColorBox, PrettyPhoto, etc)
I don;t quite get how they do it. I have everything else working in my own custom code except that piece.
Can anyone help me learn how?
Place a div over the content and set an opacity. I use this in one of my sites.
<div id="error_wrapper">
<div id="site_error">
Error:
</div>
</div>
div#error_wrapper {
z-index: 100;
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
top: 0px;
left: 0px;
opacity: 0.7;
filter: alpha(opacity=70);
}
div#site_error {
position: fixed;
top: 200px;
width: 400px;
left: 50%;
margin-left: -200px;
}
If you create a layer that is the full width & height of your page and give it a higher z index than your whole page, you can create this effect. Then put your appearing div over it.
Just use global div of the size of the page to cover any other content:
http://jsfiddle.net/CHkNd/1/
Here is an example that you can play around with.
http://jsfiddle.net/r77K8/1/
Hope this helps.
Bob

Categories