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.
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.
There is a page on my site with two sets of tabs, each tab's link is ajax-driven but has a proper href in case javascript is not enabled. I'm about to implement an ajax 'back-button' solution using a plugin such as jQuery Address.
My problem/confusion with this solution is that a page's default content is still loaded before the javascript has a chance to parse the hash and load the correct content. If I initially hide the content, non-javascript users will never see anything. If I don't initially hide the content, the user will see the wrong page for a moment before it gets updated (besides the extra overhead of first loading the wrong tab and then the correct tab).
What are the best / most common approaches to dealing with this?
Thanks, Brian
If you use hashes, you will always have the wrong content first. You need to use a server-side solution with the HTML5 History API to avoid this. Read more
You can use:
https://github.com/browserstate/ajaxify
And have the tabs render on the server side with something like if ( $_GET['tab'] === '2' ) // render 2
I think this is a good question. Have you tried using the <noscript> tag to include css that shows the content that's hidden initially for JS users. Something like this:
<style type="text/css">
#area-1, #area-2 { display: none; }
</style>
<noscript>
<style type="text/css">
#area-1, #area-2 { display: block; }
</style>
</noscript>
Hope this helps!
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);
});
Using SWFUpload v2.2, Firefox 3, IE 8, Flash 10
In my ASP.NET application all uploads are being processed by upload.aspx (I have the correct upload_url set in the settings object). In IE 8 the uploads hit the upload.aspx page and are processed, but in Firefox they do not. Any suggestions?
Most of the code for the page that the user visits to upload a file is shown here (note: master pages are being used):
<script type="text/javascript" src="../swfupload/swfupload.js"></script>
<script type="text/javascript" src="../js/handlers.js"></script>
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../upload.aspx",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
},
// File Upload Settings
file_size_limit: "10 MB",
file_types: "*.*",
file_types_description: "All Files",
file_upload_limit: 1,
file_queue_limit: 1,
//assume_success_timeout: 60,
// Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: uploadSuccess,
upload_complete_handler: uploadComplete,
// Button settings
button_image_url: "../Images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 160,
button_height: 22,
button_text: '<span class="button">Upload File<span class="buttonSmall">(10 MB Max)</span></span>',
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5,
// Flash Settings
flash_url: "../swfupload/swfupload.swf", // Relative to this file
custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
});
}
</script>
I know, its an old post, but maybe it will help to solve the problem for some people, because i had the same problem today.
I solved this problem not with using the post array, because i don't know how, and where to debug this script, but with generating a querystring
<script type="text/javascript">
var swfu;
window.onload = function() {
swfu = new SWFUpload({
// Backend Settings
upload_url: "../upload.aspx",
post_params: {
SessionID: "<%=Session.SessionID %>",
OtherID: "<%=OtherID %>"
},
//And here comes the highlight
use_query_string : true,
//code ...
After this you will get a querystring like this: ?SessionID=(id)&OtherID=(otherid)
This works with guarantee under every browser.
Try in another browser too, such as Safari or Chrome.
If it works only in IE, it's probably the Flash Cookie Bug the other answers mention.
If it works in everything except Firefox, it could be that there's no css defined for the progress bar. I don't know why this causes a problem, but I found that it did. As soon as I put the sample styles into my css file, it started working in Firefox.
The css I used is as follows:
DIV.ProgressBar { width: 100px; padding: 0; border: 1px solid black; margin-right: 1em; height:.75em; margin-left:1em; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; }
DIV.ProgressBar DIV { background-color: Green; font-size: 1pt; height:100%; float:left; }
SPAN.asyncUploader OBJECT { position: relative; top: 5px; left: 10px; }
Use an HTTP trace/debugging proxy to see if anything is actually being sent to the server at all and what response is being received, if any. Charles is my favorite and works great with Flash (and everything else HTTP). WireShark and Fiddler are other options.
Charles
http://www.xk72.com/charles/
WireShark
http://www.wireshark.org/
Fiddler
http://www.fiddler2.com/fiddler2/
http://demo.swfupload.org/Documentation/
Cookie issue
On Windows the Non-IE Flash Player plugin (FireFox, Opera, Safari, etc) will send the IE cookies regardless of the browser used. This breaks authentication and sessions for many server-side scripting technologies.
Developers should manually pass Session and Authentication cookie information and manually restore Sessions on the Server Side if they wish to use Sessions
The SWFUpload package contains work-around sample code for PHP and ASP.Net
===== Implementing some once off authentication ticket from there will make things work fine
You can also make it conditional that this authentication is only applied when users are using the upload
However, some test to ensure that the authentication cookie does not get around the other part of the site maybe important depending on how you issue the cookie for this action.
Just wanted to confirm that the same problem was just fixed by adding post_params variable to the SWFUpload init.
post_params : {
PHPSESSID : '<?=session_id()?>'
},
It sounds like you could be running into this Flash bug. Nort's solution is the way most people have been working around it. Depending on your language/framework however, you may need to add some additional server-side code to take the session variable from the url and force it to be used as the current session.
You can try the solution in this StackOverflow question, or try googling something like 'flash upload cookie'.
I found the answer ... finally. I was struggling with this for a very long time. Can't believe this is the answer. The reason is SUBST.
I have a computer with SSD drive and since it is 256GB only I decided not to partition it. However I like split between C and D partitions and I emulated it on my SSD drive via subst command. If I pickup the file from the drive which is created with subst command, the swf upload doesn't work. I almost can't believe that, but it is a fact I finally discovered today being unable to upload files on my development computer only.