I am quite often coming across sites that respond to a click on a What's This or a Gallery link by poping up a window in front of the original page, and making the original page go dim.
Is this a fancy AJAX trick?
Is it only likely to be supported in certain browsers?
And most importantly, how is it done?
This is nothing more than adding a <DIV> that covers the entire screen, and give it a black background. jQuery's UI library will handle this for you automatically.
http://jqueryui.com/demos/dialog/#modal
Or you can do it with basic HTML/CSS/jQuery like this:
div.modal-bg {
background:#000;
position:fixed;
top:0; left:0;
width:100%;
height:100%;
z-index:10;
}
<div class="modal-bg"></div>
$(function(){
$("div.modal-bg").fadeTo("slow", .5);
});
Related
I have a client who hired me to make them a single page website. I designed and programmed it in node and such. They then informed me that they had a wix account.
Since they already paid wix for a year I would like to try to make this work for them. Since you cannot upload files to wix I have it hosted on a different domain and have an iframe pointing to that domain within the page.
The only problem is the size of the iframe. Is there a way to make the iframe 100% height and 100% width? Obviously, this is not the idea way to put up a website, but I need to work with what I have so they don't waste money.
I've tried many different ways to make this work.
I have tried embedding a link to a css file using the 'embed' feature with this code in it. And the code is there, but I get iframe-ception.
wix-iframe {
width: 100% !important;
}
I have also tried added the css to the 'custom code' section under the settings, just very basic
<style>
wix-iframe {
width: 100% !important;
}
iframe {
width: 100% !important;
}
</style>
I've also tried other 'hacks' but I can't seem to get anything to work. Any help would be much appreciated.
You can adjust iframe height according to its content
Initialize your iframe like this
<iframe src="..." frameborder="0" scrolling="no" onload="loadIframe(this);" />
add the snippet below in your <head> or <footer>
<script>
function loadIframe(elem) {
elem.style.height =
elem.contentWindow.document.body.scrollHeight + 'px';
}
</script>
i actually really like this approach that is big img background, but i want it to be fluid with windows's height as well (before we scroll down to other section or div), so before reaching mobile screen, its height can always stretch and fill the whole browser screen while logo & content inside is always in the middle
i like this site, http://peterfinlan.com/, i emailed to enquire but never get any response about how to make it, i try to follow its css, but i just couldnt make my header as its, i dont really see any other flexbox css other than div.hero-content, and yes i am new to flexbox, does it have javascript or what?
can you help me?
To make a div fill the site using flex box, you need to do the following:
<body>
<div id="mainWrapper">
<div id="headerWrapper">
<!-- HEADER CONTENT HERE -->
</div>
</div>
</body>
with the following CSS
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#mainWrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
#headerWrapper {
flex: 1;
}
See an example in action here.
In this particular context, however, you don't necessarily need a flexbox as #mainWrapper already stretches over the complete site.
While flexbox is nice, don't force its usage just because it's new. Getting rid of flexbox and #headerWrapper wouldn't do any harm here.
Please note that I did not include any vendor prefixes here, so it may not work in all browsers as is. I recommend you use a tool like autoprefixer before you deploy your CSS.
In Kendo UI Mobile, version v2013.1.621, I use a TabStrip with custom icons. This all works well, except for when I want to add data-badges to it. Somehow, the webkit-mask for the custom icon/image completely 'hides' the data-badges.
My example is as follows, using Kendo's documented approach on custom icons with webkit masks:
<div id="footer-tab">
<style scoped>
/* Custom TabStrip Icons */
#footer-tab .km-icon {
background-size: 100% 100%;
-webkit-background-clip: border-box;
background-color: gray;
}
.km-demo-icon1 {
-webkit-mask-box-image: url("images/icons/icon-1.png");
background-color: #b2f23d;
}
.km-demo-icon2 {
/* ISSUE IS HERE: Remove the -webkit below, and the badge works. */
-webkit-mask-box-image: url("images/icons/icon-2.png");
background-color: #b2f23d;
}
</style>
<div data-role="tabstrip">
<!-- Custom Icons be here... -->
PAGE1
PAGE2
</div>
</div>
Again, the custom icons work well, on both iOS as well as Android. But when I append the data-badge="99" attribute, the badge doesn't show up at all. By inspecting the DOM it looks like it's in place, but is just completely not visible.
Removing the wekit-mask-box-image line, as specified in the sample above, makes the data-badge appear, but doesn't render the custom TabStrip icon.
Seems quite straight-forward, but I can't seem to put my finger on what is wrong here. Any suggestions?
Yes, the TabStrip button's badge is rendered inside the icon and the mask is hiding it. I've fixed this for the Q2 2013 release, which will be out this week.
I have problem with tooltips on my magento website, I need to have one tooltip on product page which will show a HTML UL List. I tried some plugins I found but had problems with JQuery as it was disabling other prototype pop up I have on product page.
Im really a newbie at All the types of javascript and hope you experts can help me with this please.
My trigger id for tooltips is #why-to-buy
and the tooltip class in CSS is .why-to-buy-tooltip
can anyone suggest me a prototype or scriptaculous driven simple tooltip which can show HTML please?
Any help is more than welcome.
Thanks in advance.
Typically this can be done in just CSS. To start with there needs to be an anchor;
<a id="why-to-buy" href="#" onclick="return false;">
Why To Buy?
<ul class="why-to-buy-tooltip">
<li>Reason #1</li>
<li>Reason #2</li>
</ul>
</a>
The onclick is to prevent it working as a hyperlink. An anchor is necessary for older IEs to respect the following hover;
#why-to-buy {
position: relative;
}
#why-to-buy .why-to-buy-tooltip {
display: none;
position: absolute;
width: 200px;
height: 200px;
z-index: 100;
}
#why-to-buy:hover .why-to-buy-tooltip, #why-to-buy:active .why-to-buy-tooltip {
display: block;
}
If you need more info search for and read about "CSS popups". A nice touch is to add some CSS3 transitions - old browsers just ignore them and continue to work as normal.
This type of popup is limited because it is inside an anchor, and anchors cannot contain anchors. If the #why-to-buy element is of another type, such as a DIV, then IE doesn't pick up the :hover pseudoclass. For this special case a bit of JavaScript is needed after all.
$('why-to-buy').observe('mouseenter', function() {
this.addClassName('over');
}).observe('mouseleave', function() {
this.removeClassName('over');
});
Update the last stylesheet rule to include #why-to-buy.over .why-to-buy-tooltip. The bit of JavaScript is rarely needed and can go in /skin/frontend/base/default/js/ie6.js. Or you could encourage browser upgrades and choose not to support old IE at all.
A quick Google searched returned this one, and shows to support HTML:
http://www.nickstakenburg.com/projects/prototip/
It's prototype based so should work well with Magento.
I would like to configure some kind of ajax loader to an action that executes a file upload. Once the file is quite large (Excel with more than 2000 rows), it takes sometime to be processed and its quite unpleasant to the user, wait with no other feedback than the displayed by the browser.
For me, the ideal solution, would be a blocking popup, displaying a message "Processing the file..." (or something like that), to prevent users to upload another file in the meantime.
Well... I've got something like this in place on a Symfony app although this doesn't really relate to Symfony:
TEMPLATE:
<input type="submit" class="jq-upload" value="Upload" /> // submit button
<div class="jq-loader"></div> // empty div for a loader image
JS:
$(document).ready(function()
{
$(".jq-upload").click(function() {
$(".jq-loader").addClass("jq-load-icon");
});
});
CSS:
.jq-load-icon {width: 16px; height: 16px; background: url('../images/loader.gif') no-repeat;}
So, basically the click on upload button adds a class to the empty div next to it, which has an animated gif as a background image. In this case, it's a typical loading icon.
That should give you enough to create a popup or adjust it to your needs.