Strange image re-size issue - javascript

I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).
All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.
Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.
I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/
If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.
I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s

Need to include the following external js files.
Thanks to #Sebsemillia for the help
owl.autorefresh.js
owl.autoplay.js

Related

Facebook Comment Box Disappears in Accordian

I have two examples of Facebook comment box failing to load when an accordian is collapsed and reloaded. One HTML/JavaScript basic and the other in a Wordpress site via Visual Composer - this problem also occurs in numerous other accordions
HTML Example - http://iknowdigital.co.uk/htmlexample/
Wordpress Via Visual Composer http://thesingingmajor.co.uk/test-comment-box-martin/
I have contacted Facebook Support and Visual Composer support and neither can help out.
here are the replies
From VC
Hi Martin, The issue is not with the iframe, but the js that facebook comments use to render. It is not able to re-initialize itself when it is displayed as hidden and hence the issue occur. You can see that when you add nay iframe, it works fine without any issue. It is the js from the comments which is restricting it. As mentioned previously, it will require some custom js code to re-initialize this loading when the closed (hidden) accordion is opened. Kindly check.
From Facebook
Hi Martin,The issue here is the way the library is working. If you debug the code you'll see the plugin does not disappear, the issue is that the library is changing the width of the iframe that contains the plugin to 0 and you cannot see the comments plugin. In order to avoid this situation you will have to manually change the width value again and you'll see the comment plugin is still there. I'm going to close this bug as "By design" as this is not an issue in our side.
I'm not a javascript programmer, so am really at a loss here. Can anyone chip in with some advice here?
Thanks Martin

Mobile collapse bootstrap not working in Chrome

I'm fairly competent with HTML and am working with Bootstrap for the first time, but I can't seem to get the mobile collapsible menu working on Chrome on the desktop (and presumably some other browsers).
Safari on iOS 7 with default mobile responsiveness shows the menu fine when clicked, but nothing happens when you click it in Chrome on the PC when the browser is resized to a mobile-like width.
Sorry if it has been said before - just went through the code and couldn't really understand why it wasn't working! :(
First time on SO and can't figure out how to put my HTML in here, so here it is.
Thanks peeps :)
You have linked jQuery from Google CDN and hosting your website from Dropbox. Dropbox does not allow external linking of script and font files.
So you are getting an error on your page:
Host the jQuery file on your website and link (internal linking). Like for example put jQuery in JS folder and link:
<script src="js/jquery.min.js"></script>
Problem will be gone. Hope this helps!

Why would a website behave strange in live environment?

I have a website that behaves as expected in local environment but not while it is live (I have tried two different web servers)
I think problem is javascript related.
Link: http://tevfikiltermimarlik.com/
when you just go to that url every thing is normal. A carousel is shown.
But.
If you click "HAKKIMIZDA" (bottom) again everything is normal.
after that, if you click "ANASAYFA" (homepage) now the carousel doesn't show.
And finally, If you hit F5 everything is OK again.
Another strange problem is that:
if you click "REFERANSLARIMIZ" that loading icon ("YUKLENIYOR") never goes away as long as you dont hit F5.
Those problems are really very strange to me. What may cause these to happen?
From the theme's page on themeforest - it looks like back in March they fixed some Ajax and colorbox bugs. Maybe this was one of them. Is this site perhaps using an older version? I couldn't find the version number anywhere in the source.
http://themeforest.net/item/truestory-fullscreen-html5-template/3902394
I was looking at the live site with Firebug and noticed on styles.css li, #home-slider .slides li img line 2409 it has the property:
display:none;
When I remove that CSS the images show up as they should.

Certain JavaScript doesn't work in IE9 but there is no JS error

I'm doing some maintenance work on somebody else's site and there's an IE 9 problem. They're using what appears to be a Lightbox to an image gallery. When you click on a certain image on the page, the Lightbox appears, but in IE 9, the Lightbox doesn't show up at all. There's no error or anything - it just silently fails - so I'm kind of at a loss as to how to troubleshoot.
I'm not the best at these kinds of problems. Can someone point me in the right direction?
Here's a link to what I'm working on: http://www.aquilacommercial.com/wlproperties/view/1300-Guadalupe
#Jaitsu, I confirmed that this occurs. For me, IE9 begins to open Lightbox and then immediately opens the image on it's own page. All with no errors.
I'm still unsure on IE9's issue but this might help with an alternate solution:
Most Compatible JQuery Lightbox Plugin, Works in All Current Browsers?
Finally, have you upgraded to Lightbox v2.05. Changelog indicates it didn't work on IE9 till 3/18/11. You might need to upgrade some files.
I confirmed that the Lightbox website is using Prototype v1.7. Your site is using Prototype v1.6.0.2.

Everything showed good, except the tabs. (HTML,CSS,JS)

Iam working on a website and I dont have any clue why the tabs doesnt work when I upload the website. Because when I view the website normal it does work perfectly.
By the way: The tabs are working with a jquery script.
This is the website URL: http://bmvisuals.poshh.nl/
Greetings.
Edit: I mean some of the tabs doesnt appear.
Your About me tab does not show up because your server is case sensitive.
Aboutme.jpg != Aboutme.JPG
You should check out CSS Sprites. There is a flicker when you hover over a tab (the first time) because the browser has to load the hover image. With CSS Sprites an image map is used and all the images are loaded at once so the hover is seamless.
As an aside, your site does not scroll vertically. When my window is smaller than your site, the bottom gets cut off and there is no way for me to see it.
Firstly, nice site. Secondly your tabs are totally borked for me. I am using Linux Ubuntu and Firefox 3. Not sure about the fix though. Just thought I would mention it.
Using Firebug, I see some resources give a 404 error:
http://bmvisuals.poshh.nl/Scripts/Lightbox/images/lightbox-ico-loading.gif
http://bmvisuals.poshh.nl/Scripts/Images/PhotoGallery/PhotoGalleryContainerBackground.png
http://bmvisuals.poshh.nl/Images/Tabs/Aboutme.jpg
http://bmvisuals.poshh.nl/Images/Tabs/HomeActive.png
On a side note, the page doesn't work if javascript is disabled. I would suggest using the noscript tag to show a message saying javascript is required. The other option is to make the page work without javascript.

Categories

Resources