I'm sure I can't be the first person to have this problem, but I haven't had any luck finding the solution.
I'm using Shadowbox in its simplest form; just doing an image popup with a link like
Click here to view the image.
This works fine, but has one very odd side effect: When I click the link, all of the select inputs (i.e. drop-down boxes) of the form on my page disappear. A little snooping with Firebug reveals that the CSS is being modified to give the <select> tags the property visibility: hidden. When the image is dismissed, the inputs reappear.
Not surprisingly, this happens consistently across browsers.
Since the inputs all reappear, I could probably just leave things as they are. However, if (for example) the image can't be loaded, and the script can't display it, the inputs stay invisible. Also, it looks strange and it's driving me batty. :D
Other factors that may or may not be relevant:
I have done very little with Shadowbox in the past and could very well be missing something embarrassingly obvious.
My page and its form are generated by CakePHP.
The page uses jQuery, and Shadowbox is using the jQuery adapter.
The vanishing inputs do not have class attributes. They do have id attributes that are generated by CakePHP, but these names are very specific to my application and very unlikely to cause any CSS collisions.
As far as I can tell, all of the select inputs vanish, and no other element, input or otherwise, on the page is affected at all. (Even the labels associated with the inputs are unaffected.)
Versions: Shadowbox 3.0.3, jQuery 1.4.2, CakePHP 1.3
This is a semi-bug in shadowbox, most likely. The select tags are being hidden because in some versions of IE, they are rendered using windows native controls, and thus always appear "above" any other element with a z-index. This obviously is a problem for ShadowBox, so the solution is to hide them while showing the box. Shadowbox should clearly do this only for troublesome browsers, but I think they're taking a more generic approach of always hiding them.
Related
DISCLOSURE: Until this project, I hadn't coded anything since 2000. While I am a quick study, a lot has changed. So, go easy on me?
I'm working on tweaking the UI for my web store. On both the cart page and on the item pages there are events (i.e.: change of quantity and add to favorites) that have to refresh elements of the DOM, like the total price. The issue is that when it refreshes that, there are other elements like the action button or a couple of the DIV containers like the table that the quantities are in get refreshed too.
I'm using CSS and JQuery to tweak the UI since I only have front-end access to editing anything. If I edit things through CSS I'm fine, but any JS work is thrown out. I'm adding classes to existing elements and removing the ones I don't want.
When they are refreshed, the original classes come back and mine are gone.
For example, here's a link to the page: https://billingsley.orderprintnow.com/ProductDetails.aspx?TemplateOrderItemId=0a491fc1-d9c2-44b4-9a16-32ab3ee89b08&PortalId=1f5a8f5f-344e-40da-aa93-387e73c1c82c
the button is pink at first, but if you click on a radio button to change the quantity or click the heart at the top to add/remove from favorites the button will change to the default Bootstrap version. I don't want that to happen.
Any ideas on what to even research to find a workaround? Feels like if I could mark certain elements to be isolated from the refresh life would be easier. Thanks in advance!
I am trying to help a friend troubleshoot some strange javascript issues in SharePoint 2010, but I'm confused so far.
I have a simple page with several divs, each of which has a header and starts displayed. Some simple jQuery adds an event handler to the header such that when it is clicked, the text of its matching div is hidden. This all seems to work fine. However on checking in changes to a page, very large attributes are added to each div that seem to correspond with some sort of jQuery event handler. This happens every time a page is checked in (a new attribute is added each time there is a check-in, not replacing the old one).
For example, in one div, as one of checkin:
jquery110106221769366327998="47"
appears. Since there have been several checkins, there are tons of these. Other divs are populated with lots of 'sizzle' attributes like below.
sizzle-1386877979872="[object Object]"
A div either has sizzle or jquery attributes but not both. The 'sizzle' attributes have only been appearing as of a few months ago, it was only jquery before.
I found a similar problem at Sharepoint 2010 / Jquery - Multiple attributes added in content Editor webpart edit / save, however the only answer seems to be fairly messy script solution that does not seem to address the root of the problem.
Has anyone run into this issue before / have a sense of where these attributes are coming from and how to prevent them? They seem to be serving very little tangible purpose, and make pages large and tedious to edit. Any help is greatly appreciated.
Here's a link to my page:
http://2plygraphics.com/im-here/
I have custom select menus and form elements using the :before and :after pseudo tags. There is also a lot of javascript making things hide/show etc.
If you view the page in Chrome you will notice that on the first click of any select menu in the page, the contents of the menu get cut off at the bottom. Once you have clicked once, all menus work as designed. It also appears to be a compounding issue, in that, if a menu has 11 items it is cut off more than one with 2 items. Once the page is refreshed the issue happens again...
I have tried changing or removing line heights, padding, margins, the overflow method etc. Starting to lose perspective...any help would be appreciated.
OK, here is an image of it in action:
http://i59.tinypic.com/33ljm35.png
I have tested this in windows 7 using Chrome Version 33.0.1750.154 m
Update
Does anyone have any suggestions for working around this? I'm thinking maybe faking a click on one of the select menus to get it to "activate" after the page has loaded...
I had the same problem in Chrome/Win8.1 and i could solve that by removing the font-family setting on the select-element in my css. Without that everything was working like it should.
I'm using jQuery Mobile 1.1 and I have a fixed toolbar but I want to disable hiding it when a user clicks somewhere in the page. It would even be better if I can set that up for just specific page elements (like clicking on an input box).
I tried many methods that I found on the web (e.g. $.fixedToolbars.setTouchToggleEnabled(false);) but none of them work, probably because of the 1.1 version.
You can check my example here: http://jsfiddle.net/Leqpw/
The using is the JQM v 1.0.x method for disabling the fixed toolbar. There are multiple ways to disable this functionality.
The simplest way is to simply add data-tap-toggle="false" to your toolbar. But if you don't feel like copy and pasting a bunch of times in your project try these other methods.
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
You can also configure it so that certain elements will ignore this behavior.
$('[data-position=fixed]').fixedtoolbar({ tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed" })
Update added more info for a more complete answer.
All you need to do is add the following attribute to your header
data-tap-toggle="false"
and the tap toggling will go away.
I am currently working on a Javascript program for my company (Leader Technologies) that is used to register products for Logitech. The URL for that is :
http://wwwtest.onlineregister.com/logitechreg/
My program looks totally fine on everything single web browser (including IE 6) that I have tried except Safari 4. On Safari 4, after a location, language and product category have been selected, when the actual product menu is clicked (id=WHPR), the div responsible for displaying the product is shown, but the drop-down selections are still visible. On all other browsers, the drop-down and the possible selections inside it in hidden (which is the intended behavior.)
Directly, my question is can I hid this drop-down successfully in Safari 4 WITHOUT completely emptying out the drop down and then repopulating it with only the selected value? I would rather not do this if at all possible, but if it's the only way to accomplish my goal then I can change the site additionally.
I believe the problem is where I set the listeners on the <select>:
<select id="WHPR" class="ui-formulate-ignore" style="width: 280px; visibility: visible;" onchange="whprChanged(this);" onfocus="displaySelector(form, document.getElementById('WHPR')); document.getElementById('imageHolder').focus(); this.blur();" name="WHPR">
Thank you all very much for taking the time to help me. I really appreciate all the help available on this site.
-Brian J. Stinar-
Not to pick on your style, but attaching listeners inline like you're doing is not very clean. Why not take advantage of jQuery's ability to deal with any browser discrepancies? The page you refer to is already loading it.
See http://docs.jquery.com/Events/bind
I think it's some kind of a bug in Safari - for example if you do .focus() nof for the DIV but for another input element like a textfield, then after clicking the selectbox both would have the focus (or actually, the focus would stay in the selectbox and the textbox would only seem to have the focus by having thicker border than usual).
Anyhow quick and dirty methot to achieve the goal would be removing the selectbox from the page (display: none) and then bringing it back (display:inline).
replace the this.blur() with the following command
this.style.cssText='display:none';var select = this; window.setTimeout(function(){select.style.cssText='display:inline';},1);
If you don't use a delay then it doesn't work - the removal and retrieval of the element need to be in different scopes.