I want to include Twitter Bootstrap's Tabbed Menus within a Google Maps project that is currently coded completely in javascript. Because Twitter relies on jQuery, I'm not sure how to use both of them together.
When I try to import jQuery using this <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> none of my page will render anymore.
I think I might have to use a plugin like jQuery-ui-map, but it would take too long to manually recode the whole site into jQuery (if that's what I have to do). Is there a way to import bootstrap and jquery just for the purposes of the tabbed menu, but leave the rest of the site in javascript?
When you added the jQuery <script> tag in your test page, you removed the <script> tag that loads your own script. That's why your load() function is undefined.
Your current code is:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
//<![CDATA[
var gmarkers = [];
var infoWindow = new google.maps.InfoWindow;
...
See how there's no <script> tag beginning your own script?
With regard to your question about needing a jQuery plugin to use the Maps API with jQuery, no, you definitely don't need one. I use jQuery and the Maps API together all the time. Consider this: What is a jQuery plugin? JavaScript code! Nothing else. Anything a jQuery plugin does, you can do in your own code.
(I suppose one could imagine that there may be some special bookkeeping that is needed to make jQuery and the Maps API work together, but that just isn't the case. jQuery doesn't care what's inside your map container.)
As #geocodezip mentioned, if you find the map working but odd things happening with the formatting of elements inside the map (e.g. the pan/zoom control gets clipped), check for CSS selectors that affect too many elements, such as:
img {
/* anything here is dangerous! */
}
A selector like that will affect images inside the map, which should be left alone by your CSS. It doesn't look like you have this problem in your current working test page, just something to be aware of if it happens.
Also, just an unrelated tip, you don't need type="text/javascript" on your <script> tags, nor type="text/css" on your <style> tags.
Related
I'm working in a JSF 1.2 application that uses Richfaces 3.3.3. I'm stuck with jQuery 1.3.2 as a result. To compound this, the$variable appears to be unused as it does not work in a component javascript function or within a <script> tag. I don't think it's even set. Whenever jQuery is invoked, it's done asjQuery(...). This works out fine most of the time, but now I find myself needing a later version of jQuery for a particular component, and I cannot seem to get it imported without breaking things.
The page in question extends a template that is shared by many pages. Everything that extends this template is nested in an<a4j:form>. I cannot make major changes to it. About the best I can do is put a<ui:insert>in the<head>of the main template. Then I can use a<ui:define>in other pages to slip the new jQuery version into the head. This almost works, but it breaks some Richfaces components, particularly some client-switched <rich:tab>elements on the page (they do nothing when clicked, no mouseover styling), and I get a boatload of javascript errors in the console. Other javascript/jQuery functions work just fine. jQuery.noConflict()doesn't help. I'm not sure if other components are using$behind the scenes, though.
This is a rough idea of what I'm doing:
<ui:define name="jQueryOverride"> //Inserted in the <head> of the main template
<script type="text/javascript">
var $132 = jQuery;
</script>
<script type="text/javascript" src="../jquery-1.8.2.min.js" />
<script type="text/javascript">
var jqry = $;
jQuery = $ = $132;
</script>
</ui:define>
When I add someconsole.log()statements to check the jQuery version, everything checks out. 1.3.2 is set for both$andjQuery, while jqry is set to 1.8.2. The log statements show up prior to the errors in the console.
I'm not sure how to go about this as it seems the JSF implementation is a bit unconventional on these pages and the usual methods of using a second version of jQuery don't seem to work.
This might be pretty simple though, but I can't figure out how to customize Google custom search bar API with my site css. I have tried applying several predefined css classes with restrained div width but its seems the search bar its still out of style with and iframe look.
This is my code: how do I apply a css to it
<html>
<head>
<div width="100%" id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript">
</script>
<script type="text/javascript">
google.load('search', '1', {language: 'en', style: google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl('009437919812836441502:rka9ujkwvwe', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
</script>
</head>
</html>
Or is it possible at all?
It seems possible, if you give me more example code aka the css you tried I can see where it isn't working for you. Here is something I did to constrain the width of the search bar.
#cse .gsc-search-box {
width: 200px;
}
JSFiddle: Example Code
I am assuming that your CSS styles don't have a high enough specificity then those of the Google code so that is why you are not seeing your applied styles. Your CSS styles need to have a larger CSS specificity then Google's in order for your styles to work. (Reference: CSS Specificity: Things you should know)
Let me know if that helps you move forward.
My first suggestion is to not put any non-body HTML in the <head>. That is, move the <div> you have from the head to a <body> tag.
Second, you can definitely style Google's custom search box. You'll need to use something that lets you inspect the DOM, such as Web Developer Tools in Chrome or Firebug in Firefox (although, Firefox's built-in tools are decent now, too). Google uses that div to hook into your site and deliver more DOM elements via JavaScript. After the search box loads, you can inspect it using the developer tools and see all of the other elements it injects.
The main element you'll use to style are all related to the .gsc-input class. There's a Google document in support that talks about styling these things. I'll try to find and edit this post with the link later. Here's a Google example of styling the custom search box and results.
I'm trying to create a simple portfolio site for a friend of mine based around his drawings and paintings. The layout is relatively simple but is proving to be very difficult to implement. I have three jquery scripts on the page that each perform a specific function.
1) bgStretcher - Stretches a series of background images to fill a user's window.
2) collapse - Simple collapsable menu system
3) galleryview - Basic no frills slideshow gallery
Currently, bgstretcher and collapse are on one page called nav.shtml (http://yungchoi.com/nav.shtml) and the gallery on gallery.shtml(http://yungchoi.com/gallery.shtml). Seperatley they work fine, but when I call the nav page via SSI (test.shtml), The code seems to run into problems and becomes disabled.
The solutions I've found all lead to utilizing the noConflict function in jquery (http://stackoverflow.com/questions/2656360/use-multiple-jquery-and-jquery-ui-libraries), (http://hubpages.com/hub/How-to-use-jQuery_noConflict), but everytime I've tried inserting it and changing my code, everything gets messed up again. I've also organized each script's files into separate folders and directories but that hasn't helped either.
My experience is in graphic and web design, so my coding skills are not the greatest. I do know the basics, but rewriting jquery code was not something I ever learned so I might not be understanding how to correctly fix this problem. If someone could clearly and easily explain what I would need to do to make these all work together, I'd appreciate it greatly.
Thanks!
You still have multiple versions of jQuery being loaded in your page.
Remove:
<script type="text/javascript" src="support/bgstrecher/jquery-1.3.2.min.js"></script>
and
<script src="support/collapse/jquery-1.2.1.min.js" type="text/javascript"></script>
you should also remove:
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
& - (because you only need either the packed or unpacked version, not both)
<script type="text/javascript" src="galleryview/jquery.galleryview-2.1.1.js"></script>
See if that helps.
You only need noConflict if you're going to also use other libraries that are similar to jQuery like MooTools, Dojo or Prototype. It's unlikely you will need to & if you do, you will need to recode to use the jQuery function instead of the $.
The issue it appears you're having is that all these jQuery includes are overwriting the previous version of jQuery which the plugin attached to and thus the function no longer exists when you call it.
Why are you loading Jquery twice ?
First the 1.4.2 min file and then the full blown straight after ?
You still have multiple calls to jQuery (even if files are not in same directories).
In the same way, you call "galleryview/jquery.galleryview-2.1.1.js" twice (the second file is just packed).
By the way, my error console tell me that:
"Error: jQuery.timer is undefined
Source File: http://yungchoi.com/galleryview/jquery.timers-1.2.js
Line: 135"
Are you sure you need this timer plugin? For now, it seems you have too many script included. Try to remove all unneeded files (you should keep only one version of jquery. But if some plugins you used is not compatible with, you'll have more and more compatibility problems).
I love jQuery but am running into a problem with larger site and multiple pages. My problem is that each page has unique requirements and I need to know the best way to tell jQuery which pages to activate certain things. For example, some forms need the Validator plug-in and some don't, some tables use DataTables plug-in and some don't, etc.
Now I guess I could build complex logic (switch statements) into my application JavaScript file that fire different actions depending on what page they are on, but that just seems smelly. What is the Best Practice here?
UPDATE: There have been lots of good ideas on this question but not quite what I'm looking for. Let me rephrase the question in a more general way.
Currently I am using Rails and its Prototype helpers to build my AJAX components, but I want to move to UJS. How do I tell jQuery which links/buttons to make AJAX and which to avoid? And, given that I can differentiate the that are supposed to have AJAX, how do I give each link its own parameters (method, update, etc.) like I could with the helpers?
I mean besides building a huge page of specific jQuery selectors targeting each individual link/button. :)
jQuery plugins usually are activated upon DOM elements, for example:
$("#element").myPlugin();
If the element doesn't exist on the page, plugins usually behave safely by not activating the plugin.
If your plugin doesn't follow this structure I would suggest doing something like this:
if($("#element").length) $("#element").myPlugin();
A good practice is to have code that is required by all pages in one file and to have specific javascript files for pages that require specific functionality. It sounds as though this is what you are doing anyway, so we have a good basis to build upon.
There are numerous ways in which you could build in what pages need what files, but remember that in normal circumstances, javascript files are cached by the browser such that those files need only downloading once.
In light of this comment
Yes, but what if you have multiple
pages with the same DOM elements? For
example, my validator() plugin is set
up like $('form').validate(), but
sometimes I don't want it to act on
all the forms on the page, only some
of them. What do I do in this case?
I suggest coming up with a convention by which to label elements common across pages that require certain jQuery plugins "attached" to them. For example, if you have a <form> element on a number of different pages that requires a validator() plugin, but there is more than one <form> element on any one particular page (and not all <form> elements should have the validator() plugin), then I suggest using a CSS class to distinguish the <form> elements that do need the plugin.
<!-- HTML -->
<!-- need to apply plugin to this -->
<form class="validator"> ... </form>
<!-- but not to this -->
<form> ... </form>
<script type="text/javascript">
// jQuery Code (in a separate file)
$(function() {
$('form.validator').validator();
});
</script>
That way, the plugin will be applied only to those <form> elements matching the selector.
EDIT:
I'm not sure how the helpers in rails work, but you can pass data to an event handler in jQuery using the data parameter of the bind() method for any data that is not directly part of an <a> element itself (such as an attribute like href). If some of the links require AJAX, then it may make sense to label those with a CSS class and store the URL in the href for the element. Then in your jQuery code that can be used on any pages that have links that make requests through AJAX, you could do something like
<a class="ajax-link" href="/get/someData.php">Data retrieved through AJAX</a>
Standard link with no AJAX
<script type="text/javascript">
$('a.ajax-link').bind('click',ajaxRequest);
function ajaxRequest(e) {
e.preventDefault();
$.get(e.target.href, function(data) {
$('#loadDiv').html(data);
});
}
</script>
the link will work as per a normal link when a user has JavaScript disabled, but will make an AJAX request for data when JavaScript is enabled. I've used a named function here, ajaxRequest as it can make it easier to debug the script (and perhaps also reuse), but you could use an anonymous function if you prefer.
Found nice custom solution
http://topsecretproject.finitestatemachine.com/2010/04/how-to-organizing-javascript-in-ruby-on-rails/
One thing I always do is add an id to the body tag of each page, where the id is the name of the page (<body id="contact">). That makes both javascript and css selection very easy.
For example:
<!-- HTML -->
<!-- need to apply plugin to these forms -->
<form> ... </form> on the about.php page
<!-- but not to this -->
<form> ... </form> on the index.php page
<script type="text/javascript">
// jQuery Code (in a separate file)
$(function() {
$('body#about form').validator();
});
</script>
You could pass key value pairs to your main JavaScript module informing which plugins should be imported. This technique is used by scriptaculous.
<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop">
Another approach is to define in server side which media files are needed for each form/page, so the html can be rendered automatically with links to the scripts that are going to be used. Django has a good implementation of this technique:
class CalendarWidget(forms.TextInput):
class Media:
css = {
'all': ('pretty.css',)
}
js = ('animations.js', 'actions.js')
I just moved my javascript over to jQuery for the simple AJAX functions. However I'm trying to use a lightbox plugin with jQuery since I want to keep the same functionality but don't want to include 10 different libraries.
If i remove the jquery include and keep lightbox, it works great
if i put it back it breaks, it just brings up the full size image instead of the box, neither chrome or firefox's console complains about anything, it just goes straight to the image
I tried 5 different lightbox clones/plugins for jQuery but they all gave me the same behavior, which leads me to think there's something i'm missing
right now my headers look like this (double checked, they're all there):
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/thickbox.js'></script>
<link rel='stylesheet' type='text/css' href='css/thickbox.css' />
and my gallery (php):
foreach(...){
echo "<a href=\"$path\" class='thickbox' rel='$folder'><img border=none src=\"$thumb\" /></a> \n" ;
}
for the background, the images in the foreach are loaded from an ajax call, but this was never a problem with lightbox, it shouldn't be because all the html is there anyway
This is usually because other libraries (not jQuery) also try to use the dollar sign variable name.
There's a setting in jQuery to turn on compatibility mode which will force you to use jQuery() instead of $() to make jQuery calls.
You could also use the jQuery Lightbox Plugin
Just a thought... doesn't LightBox attempt to include it's own copy of jQuery or something similar? IIRC, that might be the cause of your issues...
Try looking at Shadowbox. It has the same kind of effect but has not had issues with JQuery for me. They also have a very similar set up and are pretty easy to switch between.
You can find different ways to resolve conflict here: Using_jQuery_with_Other_Libraries