modalpopupextender resizes the screen? - ajax

Can anyone PLEASE explain to me if this is expected behavior.
I have an asp.net site that looks good and all fits on one page so no scrolling is needed. I am trying to show additional content by using the modalpopupextender when the user clicks a specific button. The content shown is inside a panel and not shown on load since the display:none is used.
The problem is that when the user clicks the button, the panel content shows BUT it resizes that portion of the screen to be the full width and height of the screen so other elements inside the table view are now shifted way off of the screen. It also adds a vertical and horizontal scrollbar that scrolls forever and never stops.
I have done hours of research on this and have tried everything I have found by setting the overflow:hidden etc... The overflow hidden would work except that all of the other elements on the screen get moved way out into no mans land.
The question is, should the modalpopupextender be affecting the size when the panel is shown and shifting the other elements off of the screen? It doesn't do when I run the code on another machine, so I am wondering if it could be a bug in the Ajax toolkit version I am using but I am not sure how to check the version that is installed.
Thanks for the ideas.

Just dealt with this; however it was exclusive to IE---FF, Chrome and Opera handled the modal appropriately. I discovered that the DOCTYPE needed to be set to XHTML 1.0 transitional instead of HTML 4 in header:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
needs to be
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Hope this helps.

Thanks. I actually tracked it down to a badly commented out script tag in the master page. I still don't know why it didn't throw a compile error. Thanks for the reply.

Related

Joomla articles and modules not showing on small screens

I'm really quite new to Joomla and I've encountered a problem. On my homepage the article is showing just fine, but all the other modules (except for the menu bar) disappear when I switch to a smaller screen size. On my other pages the article doesn't even show anymore, just the menu bar. I'm using the purity III template. I have no idea what's going on since the settings in the layout of the template indicate that all modules that are showing on a desktop should also be displayed on a mobile device, and I've found no difference in settings in the articles itself. My site.
Thanks for your help!
It sounds like the responsive design hides them on purpose.
Just from a quick peek at your code using inspect element I can see that the class "slideshow hidden-xs" gets a display:none on smaller screen sizes and all of your main content is wrapped in that element. If all of your content is not supposed to be wrapped in that element (which I'm guessing it's not) you're most likely missing a closing tag on a div or something.
Find the missing closing tag (ie: /div, /a, etc) and it will probably solve your problem.
You can update the latest version of Joomla and check again that some problem is coming or not. I yes then download new theme for your website which is compatible with your theme.

Timthumb image thumbnails not appearing on wordpress site

I'm trying to put together a page at http://www.sketch360.com/store/home/ which should show featured products and thumbnails for those products. For some reason the images aren't showing on page load, even though they immediately appear when you either right-click on the image, click on a next/previous arrow, or open 'developer tools' in chrome.
The status of the image styling in css I've noticed, changes from display:none to display:inline-block when you perform any of the above actions to get the images to show.
I've been through the timthumb troubleshooting steps at http://www.binarymoon.co.uk/2010/11/timthumb-hints-tips/ and have changed permissions on all directories according to these instructions. Any help would be much appreciated in getting these images to show up on page load.
The images show up (also using the timthumb method, I believe) on this alternative page: http://www.sketch360.com/store/shop/ but not on the first page (that is going to form the home page for the site: http://www.sketch360.com/store/home/ ).
Any suggestions would be gratefully received.
It isn't a timthumb or wordpress issue. It looks like it is a stylesheet / jQuery issue - where the div that covers the image (used for the highlight on hover) is opaque and covering the images. The funny thing is that when I "Inspect Element", the images all appear.
Double-check your starting styles for class "overdefult" - make sure it has the right opacity or set the background color to transparent. (You could also try removing it temporarily to prove that this div is indeed your issue.)
After many hours banging my head against a brick wall, I have discovered an updated script available that controls the bxSlider used to display these images in li's - and having upgraded the minified script, the problem seems to have resolved itself - just in case there are others needing help on this too.

pinterest bookmarklet doesn't work on website

A client has a oscommerce webshop with loads of interesting stuff for people to pin on pinterest, only the pin it bookmarklet won't work. I've searched everywhere on the web but couldn't find anything worthwhile about this so I'm hoping anyone here can help me.
When I click the bookmarklet nothing shows up, but when I open firebug suddenly the pinterest overlay pops up with all the images. Once everything 10 times a pinterest alert show up saying "Sorry but we can't see any big images or videos on this page". The firebug console doesn't give me anything usefull so I'm a bit out of ideas.
Okay, after some more poking around I found a reference to improper DOCTYPE's screwing up some bookmarklets in Chrome. I checked against some other sites and changed all the
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
into
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
And now it works!
As a side note, the bookmarklet also doesn't catch the images etc in frames, so that might screw up some sites also.
I had a similar problem on my girlfriend's Wordpress blog.
The issue was that I had images that had the names of "a", "b", "c", "d" (because I was lazy when coding some JS OnMouseOver rollovers). These names were causing the bookmarklet to not load - once I changed the object names, the bookmarklet loaded everything just fine.
One reason it may not work is if your site is https and the bookmarklet is old.
I noticed the Pinterest bookmarklet did nothing on our site.
The Chrome Web Inspector revealed: "[blocked] The page at https://example.com/foo ran insecure content from http://assets.pinterest.com/js/pinmarklet.js?…"
The current version of the bookmarklet is fixed to work on https sites, though of course you can't rely on your visitors to be up to date.

How to force IE8 into compatibility mode WITHOUT clicking the button

I was recently asked to assist my city with their website. What i found when i went there, was they had been using Web Expressions. When they previewed the page within the program, it looked fine, when you open it in any other browser though, the layout it all over riding each other and everything is all jumbled.
They don't want to re start anything so the only thing that i am trying to do is force the IE 8 to render it as IE 7.
I've been researching for awhile now and i know about the
line of code and i've tried this, it works even, however, they don't like the idea of having their users have to use a button. Is there a way to have the IE8 go straight into compatibility mode without having the users click the compatibility button?
I also know about the documentMode, can that be set to = 7 in javascript? Would that change anything?
If you've not already done so, try putting this in the header of your HTML:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
More information: http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx

IE8 Developer Tools not displaying Style info

I'm running into an issue with IE8 developer tools where they Style information is not displaying in the pane when I select an element. It is definitely page specific as I can switch to another page and the styles will appear for that page when I select an element.
Strangely, if I add an inline style to an element, the inline element will display in the style pane. The page finds the CSS files just fine since the page is rendering with the styles.
Anyone else encounter such a problem? If it helps, the page I'm developing is a Joomla template. I'm currently doing the process-of-elimination by deleting half the code, then the other half to identify the culprit code but I'd thought I'd throw this out to see if anyone else knows. Thanks everyone.
I saw others mention similar problems in other forums and the common issue has to do with a link tag to an external stylesheet. In my case, it was a Google Fonts Directory link.
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css' />
Removing the link temporarily allowed to style information to display.
I had a similar issue when a stylesheet had an include statement for another stylesheet that did not exist.
Try refreshing the Developer Tools' DOM cache - 4th button in the toolbar, the hotkey's F5. If the element's styles change after the Dev Tools window is opened, the actual DOM and the reported one can differ.
I ran into the same issue and found that developer tools was freaking out on my Typekit JS in the head. There was nothing wrong with it. Developer tools was just being finicky. Imagine that. I commented it out and viola, it worked again.
Another buddy of mine said he had seen developer tools freak out when an HTML tag wasn't closed properly so that might be another thing to look for.

Resources