Shadowbox not working in Firefox - firefox

I have a strange problem.
I have integrated shadowbox plugin into my drupal web and it works with Opera, Chrome and IE9, but it doesn't work with Firefox 14.
I've noticed that in Firefox rel="shadowbox" attribute is not added to the link of an image, so that should be the reason.
How could I solve this?

The whole idea of Shadowbox is (usually) that you if add the rel="shadowbox" to a link, it will show the Shadowbox. Are you really sure that the attribute is not added in Firefox? Because if that is the cause, you're probably doing something extremely weird at the server side.
Are you trying to add the attribute using some client side code? Because then maybe that code gets execute after Shadowbox registers its event bindings. You might consider changing that code to really add shadowbox to the link, instead of just setting the attribute. Shadowbox provides a fairly decent API to do exactly that.

Related

Page suddenly scrolls back to top

So I have successfully built this business website, integrated payment gateways and I have things working just as I need them to but there's a little albeit annoying problem, when scrolling down the webpage on a mobile device, the page suddenly scrolls back up. I thought this was a problem without my chrome browser so I used other browsers still the issue persists. I currently don't know how to fix this irksome issue. Here's a link to the webpage. Sorry to bother you with my problem.
I already fixed it, it was a problem from setting the HTML style behavior to smooth. Thank you all for your intended help!

Scraping an Angular website with selenium and C# returns the angular script, not the rendered web page

This seems to be by design as far as I can tell. Selenium can see the initially loaded HTML, but not the HTML after it's been massaged. I've tried IE, Chrome and PhantomJS and they all show the same behavior. So does the built-in Chrome debugger, until you inspect an element on the page, you can't query any of the rendered HTML.
I'm looking for any suggestions about how to scrape the web page. The only option I see right now is finding the chrome process, triggering the inspector, clicking inside, then running the Javascript. Needless to say, this sounds fragile.
I also haven't been able to find anything on capturing the Ajax calls from selenium so I can make them and capture the JSON. When tried copy / paste from the chrome network tab into selenium I got a missing application block message.
Does anyone have any other advice?
Since I can replicate the issue in the chrome debugger, I don't see posting code as useful. It looks like a design decision.
Ralph
Sadly, I wasn't able to do things in a straightforward way. Instead, I used Selenium to do the login and navigate to the page, then use windows API calls to click inside the window send ^a^c to copy the data and an absolute location to click on the button to go to the next page.
The site is set up so that ^a^c copies the raw data for this site. I don't know if that's standard for Angular or not.
Fragile, but it works.

WebKit shell browser for internal web application

I am creating an in-house web application that I want to run in a WebKit shell browser on the Mac. I searched and came up empty. Basically, I want the site rendered and shown in a window with no chrome for navigating to other pages, bookmarks, etc. Seems to me that there should be a relatively easy way to get something like that up and running in Xcode, but alas I don't know how. The more barebones the better. Anybody know the answer?
Not sure if this is what you're looking for, but you could use a WebView. The content is rendered by Safari/WebKit.
As for chrome, if you just put the view, that's all you'll have. You can shape the rest of the User Interface however you'd like.
Apple's documentation has a couple of examples using WebView... Should this solve your problem.
Did you take a look at the phonegap mac project.
Its a full screen webkit without any chrome in which you can put your html / css / javascript to run:
https://github.com/callback/callback-mac

Cannot click or select inputs on IE 8 Form

So basically been working on this issue for far too long now and nothing I do seems to fix the issue.
Basically if you go to http://www.completeenergy.co.uk and click on the "Get a Quote" button then try to enter details into the form nothing happens. You can not click on the inputs and or select anything within the form. This seems to happen in both IE7 and IE8.
Any ideas as to why this would happen when all other browsers seem to be working fine?
Okay, I seem to have accidentally come across the culprit. There was some strange conflicting issues arising from using the jquery pngfix. I made it so only versions lower than IE 7 can use it and boom, it starts working again.
Thanks for the help though.
not sure, but it worked fine for me in IE8. Do you have any toolbars installed?
This common issue is usually due to a z-index bug in IE. Try giving the input relative positioning and assigning a higher z-index.
I was clicking on a form on a company intranet web site and nothing was happening.
Intranet defaults IE into compatibility mode, so the form was broken.
You can force edge compatibility in your browser or with HTML and IE behave like modern browsers.

Debugging Websites in Various Browsers

I am having my first foray into website design and I am learning a lot. I am also now seeing why web developers are not a huge fan of developing for Internet Explorer. Nothing seems to work how I expect. However, since the website has to work cross-browser, I am spending time looking at it in Firefox, Chrome, and IE. Something that is very non-obvious to me, however, is how to tell where problems lie in the website.
For example, the layout of one of my pages forces a footer to the bottom of the page. It looks great in Chrome and Firefox, but there's something broken in IE that make the footer align to the right (and cause a horizontal scroll to appear). I have played around with the code, but nothing really is responding to how I want in IE (even though it does in other browsers).
Are there any tools that can help "debug" the problems on a web site so fixing it is more than just a trial-and-error approach? Thanks.
One of my favorites that works in all browsers is X-Ray. You simply stick the link on that page into a bookmark and it loads some external JavaScript on top of the page you're testing. It reveals a bunch of parameters about the DOM object you click on, as well as its hierarchy in the model.
As for your specific footer problem, I would look to a potential lack of clearing of floats and divs that are wider than their parent containers somewhere up the line.
There are frameworks like GWT, ext-js, YUI which hide a lot of the browser bugs from you. But today (near the end of 2009), there still isn't a good, realiable way to narrow down browser issues and to fix them.
PS: I'm collecting tools that help during debugging here: Which tools do you use to debug HTML/JS in your browser?
I assume you have checked that your code is valid, with
HTML validator, for example: W3C Markup Validation Service
CSS checker, for example: W3C CSS Validation Service
And, of course, you should have correct doctype in your html file. Without doctype, some browsers go to quirks mode to emulate bugs in old browsers.
A cross-browser JavaScript library, like jQuery and its UI components, can be very helpful in avoiding idiosyncrasies between browsers. Microsoft provides the IE Developer Toolbar, it's not quite as easy to use as Firebug, but can still be very helpful. A Just-In-Time debugger like MS Script Debugger or Visual Studio are also a time saver.
I like Firebug for Firefox
and IE8 has Developer Tools from the tools menu and IE Developer Toolbar for older versions.
Chrome has similar tools from the page menu.
All of which allow you to see elements on the page as they are rendered in their specific browsers, which I usually find very helpful in debugging browser specific problems.

Resources