I am using jQuery to convert a navigation menu to a select list when the browser window is small, for a responsive design. However, selecting Options of select list redirect to appropriate page in Firefox and Opera, on Webkit based browsers, selecting an option does not do anything.
Live demo - http://emoeco.com
$('ul.menu').each(function(){
var action="loadPage(this.form.elements[0])";
var form=$(document.createElement('form')).insertBefore($(this));
$(form).attr({
method: 'post'
});
var select=$(document.createElement('select')).appendTo(form);
$(select).attr("onchange", action);
$('>li a', this).each(function(){
var a=$(this).click(function(){
window.location.href=this.href;
}),
option=$(document.createElement('option')).appendTo(select).val(this.href).html($(this).html()).click(function(){
a.click();
});
});
});
First, you should open a JavaScript console and look at the errors. Most of them are due to files not being found.
Second, just looking at the heads tag makes me die a little inside. I know this is not the purpose of your question, but you create enormous overheads by loading the same things twice or more. Please spend the 5 minutes needed to fix that; the site will load a million times faster
Third, if I understand your question right, you should do it in a way that the user has to click a button to traverse to a page. Plus, instead of completely removing the menu, why don't you scale it?
Fourth, if you dislike Thirds, why not dump the whole anchor thing, and just use select's native 'change' event?
$('select').change(function() {
location.href = $(this).children('option:selected').val();
});
Edit: As to why it doesn't work only in WebKit, it's because they don't tie the click event to the 'option' element. At least that's what I think: You can try this example (add /edit to the url to see the source code.) Tested working in FireFox, got nothing in Chrome
Related
I have a code that covers the whole content with a link (target= _blank), then turns that link's display into none, brings another link and so on.
In my browser everything works just fine but I got a complaint about how only 2 of these links work.
No matter which link they click, after the second one it doesn't work.
Did the same thing with addEventListener and onclick but they caused different problems so therefore I used "a href".
I only can use JavaScript to create these elements and unable to use plain HTML.
I searched about browser's behaviors on multiple new tab or window but couldn't find anything useful.
This is how I create the links:
var hidden= document.createElement("a");
hidden.href="somelink";
hidden.style.height="100%";
hidden.style.width="100%";
hidden.target="_blank";
hidden.style.display="none";
container.appendChild(hidden);
And to make them appear, I add an event listener to a video and make them appear and disappear the right time.
video.addEventListener("timeupdate",function () {
if(video.currentTime>=3 && video.currentTime<5){
hidden.style.display="block";
} else if(video.currentTime>=5 && video.currentTime<6) {
hidden.style.display="none";
}
}
Is it a browser behavior that blocks the multiple new tabs or should I look for the answer in something else in my code?
Dear community and readers:
programming a small website I have encountered for first time a strange behavior. What I basically do is that I hide the body until page load and then fade it in. Via onClick on a link in the navigation I use redirectPage and the procedure repeats with the target link page. So this works all wonderful but when visiting the site in the browser and using the back button it seems that the pages visited before are not rendering. Latest Google Chrome versions are doing it, Firefox, Safari fail. Strangely own Safari, clicking the back button three times forces the homepage to load again. This happens most of the times but not all time.
Has anyone an idea how I could achieve in my function to force a render anytime the back button is pressed. Might be a silly question but I really never came across this issue. I tried some snippets I found and worked around them my own way. They did not work and I would rather understand the problem than choose pure cosmetics.
Thank you for your input!
// Document on load.
$(function(){
gotToNextSection();
loaderPage();
ScrollNext();
moreProjectSlider();
// Animate
contentWayPoint();
})();
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("body").stop().animate({
opacity: 1
});
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
I tried to use a page on
http://dimsemenov.com/plugins/magnific-popup/
to start with the project. So I took the code an assumed to find out, what I need from the larger page for me. Though, cutting anything away made id not function at all.
What resources are needed (css, js, links)?
I need on several pages a light box and want to load the first picture as soon as the page loads. Tried to build a test page on
http://grillparzerhof.at/magnificversuch/index.html
though there is a light box not at all. It is a very beginners question; please help.
~ Karl
This is the code on that page in Public Methods you should use to fire the lightbox on page load, this instruction is near the bottom of the Documentation page:
// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept).
// - first parameter: options object
// - second parameter (optional): index of item to open
$.magnificPopup.open({
items: {
src: 'someimage.jpg'
},
type: 'image'
// You may add options here, they're exactly the same as for $.fn.magnificPopup call
// Note that some settings that rely on click event (like disableOn or midClick) will not work here
}, 0);
I am using plupload 1.5.7. I have two buttons on page:
First one (Add new attachment) was used as browse_button in plupload configuration. When I click it, it doesn't work. Click event is executed, but file browser is not opened. But there is second button (Trigger add new attachment click), which only does this:
$('#TriggerAddNewAttachmentClickButton').click(function() {
$("#AddNewAttachmentButton").click();
})
So it only triggers click of the first button. It works fine. Clicking it opens file browser.
How is this possible? This behavior is consistent between Firefox, Chrome and Internet Explorer.
Obviously this is security related, because plupload uses tricks to hide input, but second method is not safer. I can't reproduce this issue in jsfiddle, it exists only in specific context, but maybe there is someone, who ecountered similar behaviour.
I got a similar issue with plupload. I digged into this issue for hours, and finally I find the reason. As #jbl said:
I guess I remember I had this kind of problem when the container was not visible upon plupload initialization. Could it be the same problem ?
The way of plupload working is as following:
Remember you need to set a browse_button? Actually the plupload will create an input[type="file"] for each browse_button. In normal situation, the size and position of the input[type="file"] will be the same with the browse_button exactly. So when you click the browse_button, it's not the button trigger a file chooser dialog popping up, it's the input[type="file"].
But when you set the browse_button container something like: display:none(we say, inactive), and after that even you set back the display:block(we say, active), the width and height of the input[type="file"]'s parent container would be zero some time.
My quick fix solution for this issue is as following:
I measure the position and size of the browse_button when change the state of the container from inactive to active. Then I'll manually set the position and size to the hidden input[type="file"];
Following is some sample code:
var $btn = $currPanel.find(".browse_button");
var w = $btn.outerWidth();
var h = $btn.outerHeight();
var position = $btn.position();
var $hiddenInputDiv = $currPanel.find(".moxie-shim");
$hiddenInputDiv.height(h);
$hiddenInputDiv.width(w);
$hiddenInputDiv.css(
{
top: $btn.css("margin-top"),
left: position.left
});
I am interested in opening a webPanel on the right side of the Firefox window. Based on an MDN article, I determined that this could be done by setting the browser element's direction style. However, I wish to clear out this setting after the webPanel is closed. Is there a way I can detect this? Thus far, the only way I can think of is to poll sidebarWindow.location.href (to detect if the sidebar is changed) and sidebarHidden (to detect if the sidebar is closed).
var browser = document.getElementById('browser');
browser.style.direction = "rtl";
var sidebarWindow = document.getElementById("sidebar").contentWindow;
var sidebarBox = document.getElementById('sidebar-box');
var sidebarHidden = sidebarBox.collapsed || sidebarBox.hidden;
sidebarWindow.addEventListener("unload", function (event) {
alert("1"); //This code fires when the web panel is opened
//but not when it is closed.
});
sidebarBox.addEventListener("unload", function (event) {
alert("2"); //This code does not fire.
});
sidebarWindow.addEventListener("close", function (event) {
alert("3"); //This code does not fire.
});
sidebarBox.addEventListener("close", function (event) {
alert("4"); //This code does not fire.
});
openWebPanel('Test', 'http://www.google.com');
IIRC there are essentially three ways a sidebar can be "closed":
The user closes it using the GUI (X-box) or keyboard shortcut. In this case, the web panel will not necessarily get unloaded, so there is no unload event.
Another document is loaded into the web panel. In this case you might get an unload.
The user opens another panel. There is not necessarily an unload.
Should you go forward with your implementation, you need to make sure your code handles all three correctly.
and 3. should be observable by the <broadcaster id="viewWebPanelsSidebar"> changing the checked attribute (see the implementation of toggleSidebar()), so you could have another element observing and acting on onbroadcast.
should listen for unload and act accordingly.
To get proper unload events, I think the following should do the trick:
sidebar.contentDocument.getElementById("web-panels-browser")).
addEventListener("unload", ...);
But my memory there is a bit wonky, so you might need to fiddle with that a bit. (The sizebar has a <xul:browser id="web-panels-browser"> which displays the actual content...)
After having said all that: I think it is a bad idea to mess with the sidebar like this.
The MDN wiki(!) has bad advice in this case.
The sidebar was not designed to be messed with like this.
There are other add-ons "competing" with yours when it comes to messing with the sidebar.
The sidebar code is, for the most part, pretty archaic and under-maintained. Getting things like your requirement to work correctly is pretty hard. There still might be other code (in add-ons) that could dismiss the sidebar that you and I didn't think of.
The sidebar might not be the best place to display your content in the first place (what that content would be you didn't say). If it's something like context-help, dictionary/definition lookup results, login forms, then it won't be a good fit.
Some users might not like that their always-on bookmarks/history sidebar gets replaced by yours. You could handle this by re-opening the previous one, but that will only complicate matters further.
You might be better off using some other way to display information - e.g. a new tab, a panel, a new sidebar like the social sidebar... E.g the social sidebar is not only on the right, it actually is a standalone sidebar not part of the "main" sidebar.