Javascript debugging issue with colorbox - javascript

Ive recently been making structure and style edits to http://washingtongraphic.com/logo-design.html and found that the colorbox plugin no longer works. When you roll over each logo, it should pop-up to a larger size and go back to its normal state when you roll out. In addition, when clicked, it should appear in the colorbox window… this also does not work. All of the links to the scripts and other resources appear to be correct, but for some reason, the script is not triggered on roll-over and the colorbox window also does not appear when clicked. A functional example (of how it should be working) can be found here: http://washingtongraphic.com/annual-reports.html. Im not very good at debugging javascript yet and can really use all of the help I can get. I have been using firebug but am not sure how to tell where the script is failing. Thank you all in advance.
Also, I did not create this site but am merely editing it… its not how I would have built it (I know there are some other structure issues here!)

The issue is the load order of trialbyfire.js and trialbygallery.js.
Make sure they're loaded in this order (you have them reversed on the logo-design page):
<script src="js/trialbygallery.js" type="text/javascript"></script>
<script src="js/trialbyfire.js" type="text/javascript"></script>
Additionally, to fix this error, you have two choices:
Uncaught TypeError: Object #<Object> has no method 'scrollable' on trialbyfire.js:89
Remove:
// Mousewheel
// execute your scripts when DOM is ready. this is a good habit
$(function() {
// initialize scrollable with mousewheel support
$(".scrollable").scrollable({ vertical: true, mousewheel: true });
});
Fix the 'scrollable' dependency. Likely a plugin that should be loaded, but isn't.

Related

Dropdown menu on mobile not working

I have a toggle dropdown menu button that appears on smaller resolutions/devices, but for some reason it isnt working. When clicked, nothing appears/shows.
Most likely there is something missing (JS function that makes it open maybe). Copying entire code doesn't make too much sense to me, so I am just using some of it:
http://goo.gl/TNixQe
UPDATE
True about responsive design. Now I noticed it (but did you say about it in your question? nope.).
When I tried to resize window firebug had found this error:
This error appears in js_func.js file in 9 row. Are you sure you link libraries correctly? JS can't find uniform() function.
Possibly this error is appearing, because all your instructions are in simple function. Try to add them to onload handler. Possibly browser try to load this instructions before uniform library had been loaded.
I meant this:
$(document).ready(function()
{
// use `uniform()` function on elements
}
OLD ANSWER
It is simple drop-down menu, based on lists. It is working throw hover handlers.
You can't do 'hover' on your mobile device. You can tap on screen only.
If you want users with gadgets use your site, you have to create menu espesially for gadgets.
Small trick, which helped me (because I am lazy :)) is to assign javascript:void(0); to 1 level buttons hrefs. This worked on SGS2 and Xperia Z1, but I am not sure it will work everywhere. With that trick, a man will tap on menu button and drop-down menu will appear.
You have a javascript error on line 9 of js_func.js:
Uncaught TypeError: Object [object Object] has no method 'uniform'
This will be causing any code below it not to be run.
Could it be a missing plugin on the mobile version?
A quick google suggests that the issue is with your jquery verison, they say to downgrade to 1.8.3.
In your case you are using 1.8.2, so try upgrade to 1.8.3.

How to load dijit dialog in IE using javascript?

I have an application which contains dijit dialog and we are loading that dialog using .show method in all browsers like mozilla ,chrome,safari but when we do same with IE7,it says zoomChart is undefined .
Note : data-dojo-id="zoomChart"
Maybe it's the Problem, that the widget wasn't ready loaded at this time.
IE handles many things in other ways the Firefox, etc. What other browsers ignore, disturbs the Ie.
UPDATE1
Possible Solution:
This one is setup at the beginning of your Html-Page right afterwards the declaration for the Scripts. In the Init-Function you can load all Modules the you later want to use. dojo/ready and dojo/domReady guarants you, that all nessessary Scripts and Nodes are loaded BEFORE it starts.
<script type="text/javascript">
require(["dojo/ready"],function(ready){
ready(function(){
init();
});
});
function init(){
require(["dojo/domReady!"],function(){
zoomChart.show();
});
}
By the way - even with this minimum of code you paste in the comments its nearly impossible to say where the error lies. Please, if the Example above wont work fot you, post all of the code is related to the problem.
Here's a link to dojo/domReady which could be helpful for you:
http://dojotoolkit.org/reference-guide/1.8/dojo/domReady.html#dojo-domready
Regards

Controlling the ShareThis javascript window opens

I have just started using ShareThis Widget to help handle social media integration with one of our sites. While the functionality is great, I feel I lose a lot of the capabilities I have if I were to code each item by hand, such as the ability to control the size of the windows opened by clicking a 'share' functionality.
While their site shows basic functions you can add to the buttons (url, etc) I am looking to customize the feel such that when a button is clicked, I can control the size of that window or even possibly open in an existing colorbox snippet.
Has anybody had luck with this before? When I try to control via javascript function it just seems to get overwritten or ignored.
You'd need to unbind their events and handle them all yourself. It probably isn't a good idea, as your code will be at the mercy of their implementation.
I am not sure if your question is resolved, but you will need to add as following inside JS.
popup: 'true'
The same is on their Support Page

jScrollPane not supported by certain objects? No custom css applied to scrollbars

I'm sorry if this is a very simple question, but I can't seem to find the answer on SO or in the jScroll google group.
Currently, my code is essentially:
<div id="wrapper">
Content here.
</div>
Then, inside of a function called in $(document).ready, I have:
$('#wrapper').jScrollPane({ showArrows: true, verticalArrowPositions: 'after'});
However, the error I received is:
SCRIPT438: Object doesn't support property or method 'jScrollPane'
What's interesting, is that the code successfully applies localized scrollbars to the wrapper div. However, none of the custom css is applied, and when I check in Firebug, the jScroll is not creating it's own scrollbars, which I suspect is why only the browser's native scrollbar design shows up.
Any idea what this error means? The object is a div, so I don't know why it won't support jScrollPane. All of the correct CSS and JS files are being pointed to, and Firebug tells me that the site is loading them. I have the same issue in all browsers.
Apologies for not being able to provide a link. The project is on my company's internal servers. Thank you for any advice you might have.
EDIT: Here are what my links/script looks like in the header.
<link type="text/css" href="jscroll/jScrollPane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jscroll/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jscroll/jScrollPane-min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
EDIT: RESOLVED.
I'm not sure if this is exactly why the problem resolved, but I realized that other parts of the page I was working on were calling more updated versions of jQuery. I removed all of the calls, except for the one shown above, since it's the version called on the jScrollPane tutorial page. Seemed to fix the problem.
Thanks everyone.
RESOLVED. I'm not sure if this is exactly why the problem resolved, but I realized that other parts of the page I was working on were calling more updated versions of jQuery. I removed all of the calls, except for the one shown above, since it's the version called on the jScrollPane tutorial page. Seemed to fix the problem.

Un-obtrusive modal window in external site

Sorry for the title.....bit difficult to word what I really want to ask.
Some websites allow a user to copy and paste some widget for use with their own site. For example, getsatisfaction. Yes, those feedback icons that I hope most of you see in various places.
If you have a look at twitterfeed, on the left there will be a feedback icon, once clicked on a nice modal window comes up. the modal windows content is in an iframe to an external source.
I really like this, but my question is:
I could do the same by using some jQuery library for the modal window and then linking the modal content to a site on my page, but how do I stop this from becoming obtrusive to a sites other javascript files?
For example, let's say i'm using my js code and the relevant jquery code, and i've minified it into one file. The user adds my widget to their site. If they're using jQuery, how do I make sure my code isn't going to interfere with theirs?
Would the best way be to use a modal window library which is not very popular?
Thanks very much. Hope that makes sense!
EDIT: I could write my own modal window functionality code, but i'd much rather use a library which already does it.
You can dynamically load jQuery only if it is needed.
First check for the existance of the jQuery object. If not add the script tag.
There are some challenges to this, as there is no onload event when adding a script tag to a page, that works consistently accross browsers, so you will have to poll to see if it fully loaded, and only then run your code.
There is an article on how to do this:
http://www.squidoo.com/load-jQuery-dynamically
You may still have an issue if the user has a differnt version of the jquery library though, although you can probably get around this with some additional checks.
jQuery UI has very nice dialog components that should fit your purpose. Inside them you can instantiate an iframe. see:
http://elijahmanor.com/demos/jqueryuidialogiframe/index.html
If I understand all this correctly, the iframe content is a separate page, so there is no case where your javascript code in that page would interfere with the javascript of the calling page, but maybe I haven't understood that part correctly?
EDIT:
I think I understand what you meant, in that you want to package up the code that you will write that opens the modal window with the iframe. SO you want to make sure that this code does not interfere with existing jQuery code that the user is using.
I think this is a good use case for a jQuery plugin. This way the user of the page can use your function like any jQuery function, so less likelyhood of collisions

Categories