On Google code playgorund, I tried to load multiple library like below
google.load("jquery", "1");
google.load("mootools", "1.2.1");
But it breaks the code, why ? Thanks
I've created a simple Chrome extension that seeks for certain strings using regex and replaces matches with predefined text. It works well on most websites, but somehow the script doesn't take effect on, for example, Lifehacker (like this page http://lifehacker.com/5939740/five-best-audio-editing-applications?popular=true ).
The code is:
$('p, h1, h2, h3, span, .content, .post-body').each(function(){
//do something with $(this)
});
Any ideas why is Lifehacker's site resistant to my script?
i have a button in html that has a background image and text overtop of it, how can i disable the selecting of that text so it looks more "seamless"?
echo '<td width="130" height="30"'. "onClick='document.location = ".'"'.$value.'";'."'><center>".$key."</center></td></a>";
Could I somehow disable action (send, redirect) from submit if the textarea was empty (so nothing at all happens onclick). I want to avoid displaying error here, thats why I'm asking.
My textarea:
<textarea id="message" name="message" maxlength="35"></textarea>
My submit button:
<input id="send" type="image" src="/site_media/static/images/submit.png" value="Submit">
This is what i tried: http://jsfiddle.net/5Xwyb/
My brain died couple of hours ago.
Based on samples, I can see that you can set a default view in OpenLayers by saying something along the lines of:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
However, this also (as the name implies), restricts me to be able to ONLY navigate within these bounds. I can zoom out and see things outside of these bounds, but I can't then zoom back onto them, or scroll to them.
I've tried not having any restrictedExtent (or making it the entire map), but then I can't get it to focus on the area I want. I tried using:
map.setCenter(new OpenLayers.LonLat(0,0), 3);
console.log(map.getCenter());
To set the zoom and the center...but it doesn't seem to do ANYTHING, other than set the variable "center" which I can then read from map.getCenter() (if I don't set it, it's null, if I do set it, I can see it...but the map itself stays fully extended and it's center doesn't seem to change at all...)
The Map layer I am using is:
OpenLayers.Layer.OSM.Mapnik
with displayOutsideMaxExtent set to true... I'm really at a loss here.
My goal is to have a default region of the world zoomed in to and in view (such as the United States), with the option of viewers being able to go outside the default to view things.
I have a definition list with a lot of text inside of it. When a user comes to the page, I want the jQuery to hide two thirds of that content, add a next and previous button where appropriate, and fade the content in and out. The first third of the content is .issue-group-1, the second third is .issue-group-3, the third, .issue-group-3.
I am trying to set it so that when the user hits the next button, the next button changes classes, and thus acts differently the next time the user clicks it (that is, it takes them to the third page instead of the second.
Right now, the next/previous buttons are working on the first and second "pages" but the next button to the third page won't work.
My code is probably too long and this is maybe not the best way to do it--I'm new to jquery. Any suggestions would be helpful.
$(document).ready(function(){
$('.issue-group-2, .issue-group-3').hide();
$('a#next-button.page1').fadeIn(500);
$('a#next-button.page1').click(function() {
$(this).removeClass('page1').addClass('page2');
$('.issue-group-1').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#previous-button').fadeIn(500);
});
$('a#previous-button.page2').click(function() {
$('#next-button.page2').removeClass('page2').addClass('page1');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-1').fadeIn(500);
});
$('a#previous-button').fadeOut(500);
});
$('a#next-button.page2').click(function() {
$('a#previous-button').removeClass('page2').addClass('page3');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-3').fadeIn(500);
});
$('a#next-button').fadeOut(500);
});
$('a#previous-button.page3').click(function() {
$(this).removeClass('page3').addClass('page2');
$('.issue-group-2').fadeOut(500, function() {
$('.issue-group-2').fadeIn(500);
});
$('a#next-button').fadeIn(500);
});
});
document.addEventListener('contextmenu', function (e) {
e.preventDefault()
e.stopPropagation()
e.returnValue = false
e.cancleBubble = true
})
No way?
Edit: document.oncontextmenu = null does not work.
P.S. I cannot have the reference of the listener function since I am not the owner of the site preventing the context menu.
Hi,
I've made this code:
window.setInterval(function(){ var a = doStuff(); var b = a + 5; }, 60000)
The actual contents of the anonymous function is of course just for this small example as it doesn't matter. What really happens is a bunch of variables get created in the scope of the function itself, because I don't need/want to pollute the global space.
But as you all know, the doStuff() function won't be called until 60 seconds in the page. I would also like to call the function right now, as soon as the page is loaded, and from then on every 60 seconds too.
Is it somehow possible to call the function without copy/pasting the inside code to right after the setInterval() line? As I said, I don't want to pollute the global space with useless variables that aren't needed outside the function.
Hi,
I have a favourite and un-favourite functionality in my application and I am using jQuery. This functionality works partially. The page gets loaded, and when I click the 'favourite' button(it is inside add_favourite_div element), it sends a XHR request and the post is set as favourite. Then a new div called "remove_favourite_div" replaces its place.Now when I click the remove favourite(which is part of remove_favourite_div), it sends a normal http request inside of xhr.
The structure when the page gets loaded first time
<div id="favourite">
<div id="add_favourite_div">
<form method="post" id="add_favourite" action="/viewpost/add_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden"
value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]"
id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="Favourite" name="commit"><br>
</form>
</div>
</div>
DOM after clicking on the unfavourite button
<div id="favourite">
<div id="remove_favourite_div">
<form method="post" id="remove_favourite" action="/viewpost/remove_favourite">
<div style="margin: 0pt; padding: 0pt; display: inline;">
<input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho="
name="authenticity_token">
</div>
<input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id">
<input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
<input type="submit" value="UnFavourite" name="commit"><br>
</form>
</div>
</div>
In my application.js, I have two functions to trigger the xhr request
$("#add_favourite").submit(function(){
alert("add favourite");
action = $(this).attr("action")
$.post(action,$(this).serialize(),null,"script");
return false;
});
$("#remove_favourite").submit(function(){
alert("remove favourite");
action = $(this).attr("action");
$.post(action,$(this).serialize(),null,"script");
return false;
});
Here, when the post is initially not a favourite, favourite button is displayed and when i clicked on the button, $("#add_favourite").submit gets called and unfavourite form is displayed correctly, but now when I click on the un-favourite button, $("#remove_favourite").submit does not get called.
The whole scenario is true in both ways, I mean favourite-Unfavourite and Unfavourite-favourite
Can someone please help me to solve this
Thanks
sifr3 text doesn't load many time first time on FF 3.5? I haven't checked on other browser.
If i reload page again then it loads properly.
this is my code
sIFR.replace(futura, {
selector: '#Homepage h1', ratios: [6, 1.24, 9, 1.13, 10, 1.15, 16, 1.09, 21, 1.06, 22, 1.07, 25, 1.04, 26, 1.06, 29, 1.03, 30, 1.05, 31, 1.03, 32, 1.05, 41, 1.04, 58, 1.03, 97, 1.02, 1.01],
wmode: 'transparent',
css: '.sIFR-root { background-color: none; color: #ffffff; }'
});
Hi,
Ive been fiddling with this for hours and hours and just cant get it right. First off my sites are already using Prototytpe and Scriptaculous, and to change would take a long time.
Basically I am after achieving a slideshow effect similar to jQuery Cycle plugin. I have written most of it but cant get over this hurdle:
I need the user to be able to press a control button which will skip the slide to which ever one they have picked. My problem is that if a fade / appear effect is running, then it causes an overlap.
I am using queues and they are in their own scope. The problem as I see it is that the fade effect on one slide and the appear effect on the next slide are separate functions. Which means that if the user clicks the control button to move to another slide whilst the animation is inbetween fade & appear, then the next cycle will slot itself in the queue between those 2 effects. The default is to append to the end of the existing queue, which should be fine. But if the appear hasnt been added when a new fade is instantiated, then the queue messes up.
I can make it so nothing happens if animation is in effect but thats not the effect I am after. I want to be able to click a slide and whatever is happening to effectively stop and the next slide appear.
This is an example of what I am after: http://www.zendesk.com/
Im sorry if that doesnt make sense. Its a tough one to explain.
Thanks
Lee
I would like to flash a success message on my page.
I am using the jQuery fadeOut method to fade and then remove the element. I can increase the duration to make it last longer, however this looks strange.
What I would like to happen is have the element be displayed for five seconds, then fade quickly, and finally be removed.
How can you animate this using jQuery?
I am building a web application that is dependent upon several third-party libraries. What is a good strategy for making sure that you're always using the most fully patched versions? A simple method would be to keep the versions written down and visit the websites at regular intervals, but I am looking for some way to get the information 'pushed' to me if possible. I figured that there might be others out there who have needed to do the same thing and have worked out a good solution.
Here are a few libraries I am using:
Zend Framework
jQuery
HTMLPurifier
Markdownify
InnovaStudio WYSIWYG Editor
Fancybox
MojoZoom
I have an ajax app that will run functions on every interaction. I'd like to be able to run my setup function each time so all my setup code for that function remains encapsulated. However, binding elements more than once means that the handler will run more than once, which is obviously undesirable. Is there an elegant way in jQuery to call bind on an element more than once without the handler being called more than once?
hi,
just wonder how those air ticket booking website redirect the user to the airline booking website and then fill up(i suppose doing POST) the required information so that the users will land on the booking page with origin/destination/date selected?
Is the technique used is to open up new browser window and do a ajax POST from there?
Thanks.
I have turned on PopUp blocker in FF and Chrome.
I have a piece of code to check PopUp is working as:
[Code]
function checkPopUp()
{
var myTest = window.open("about:blank","","directories=no,height=1,width=1,menubar=no,resizable=no,scrollbars=no,status=no,titlebar=no,top=0,location=no");
var popUpsBlocked = '';
if (!myTest) {
popUpsBlocked = true;
} else {
popUpsBlocked = false;
}
return popUpsBlocked;
}
[/Code]
its working fine "onload" of the page.
But when i am using it with hyper link onclick, its not working a popup is getting opened.
[code]
Test
[/code]
So I've been getting my ass kicked pretty good with Facebook's moving target of an API. I need to display some hidden content after a person clicks 'like' on a landing page. I can somewhat get this to work, when the user clicks 'like' the normal fb dialogue appears and then goes away immediately and content is displayed. I have 'achieved' this with the following js.
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
document.getElementById('goodies').style.display = "block";
document.getElementById('fb-content').style.display= "block";
document.getElementById('copy').style.display = "none";
});
</script>
I cannot find any documentation about a callback event after someone hits "post to facebook" or after the dialogue closes, only afte they hit like. How would I incorporate a setTimeout function into this to give people some time to fill out the fb dialogue?
thanks. If anyone has a better way to do this I'm all ears. This is for a business page and I cannot seem to add an app to get an app ID anymore so the API is pretty useless to me at this point. Also, if the url to be liked is a fb page, the callbacks don't seem to fire.
Other code used:
<html xmlns:fb="http://ogp.me/ns/fb#">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<fb:like href="onlynonfburl.com" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>
I am creating a gallery using jQuery which displays pictures horizontally, with a "left" and "right" button below, that scrolls the row of images. There are plenty of tutorials and plugins for this.
The problem for me though, is that 1) I don't know the width of the images. And 2) I need the item I scroll to, to be centered.
How do I go about this?
Thanks a lot, Gorm
I'm building a search using ext-js. I have an event that fires on keyup. I want to be able to change either the URL I'm searching, or the params. I've had luck with neither.
Here's my snippit of code:
Ext.get("search").on('keyup', function() {
proxy.url = '/customer/list?key=' + $('search').value;
store.load();
});
But, no love for me. The store loads, but the proxy.url is the old value. Is what I'm trying to do possible?
Thanks in advance!
So I've already written a function that works (based on underscores throttle) for functions that don't take in a parameter, but I'd like to make it generic enough to pass in a function with a variable number of parameters. Here's what I have:
(function () {
var lastTime = new Date().getTime();
function foo() {
var newTime = new Date().getTime();
var gap = newTime - lastTime; // Travels up scope chain to use parents lastTime. Function has access to variables declared in the same scope
console.log('foo called, gap:' + gap);
lastTime = newTime; // Updates lastTime
//console.log(x);
//x++;
}
var throttle = function(func, wait) {
var result;
var timeout = null; // flag updated through closure
var previous = 0; // time last run updated through closure
return function() { //func, wait, timeout, previous available through scope
var now = new Date().getTime();
var remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(this, arguments); //func is available through closure
}
return result;
};
};
document.addEventListener("scroll", throttle(foo, 1000));
//document.addEventListener("scroll", throttle(foo(5), 2000));
}());
But I'd like to modify foo to foo(x) and get this to work
(function () {
var lastTime = new Date().getTime();
function foo(x) {
var newTime = new Date().getTime();
var gap = newTime - lastTime; // Travels up scope chain to use parents lastTime. Function has access to variables declared in the same scope
console.log('foo called, gap:' + gap);
lastTime = newTime; // Updates lastTime
console.log(x);
x++;
}
var throttle = function(func, wait) {
var result;
var timeout = null; // flag updated through closure
var previous = 0; // time last run updated through closure
return function() { //func, wait, timeout, previous available through scope
var now = new Date().getTime();
var remaining = wait - (now - previous);
if (remaining <= 0) {
clearTimeout(timeout);
timeout = null;
previous = now;
result = func.apply(this, arguments); //func is available through closure
}
return result;
};
};
document.addEventListener("scroll", throttle(foo(5), 2000));
}());
What is the difference between including private functions in a jQuery plugin in the examples below:
Outside the loop:
(function( $ ){
var defaults = {};
$.fn.cmFlex = function(opts) {
this.each(function() {
var $this = $(this);
//Element specific options
var o = $.extend({}, defaults, opts);
//Code here
});
function f1(){....
function f3(){....
function f2(){....
};
})( jQuery );
Inside the loop:
(function( $ ){
var defaults = {};
$.fn.cmFlex = function(opts) {
this.each(function() {
var $this = $(this);
//Element specific options
var o = $.extend({}, defaults, opts);
function f1(){....
function f3(){....
function f2(){....
});
};
})( jQuery );
The advantage of including the functions in the loop is that i will be able to access the $this variable as well as the Element specific options from f1() f2() f3(), are there any disadvantages to this?
I have a YQL query that extracts data from a page and returns it to my script as JSON. The JSON is huge, and as such, here's my question:
Is JSON array parsable? So that I can iterate over the entire JSON structure?
Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?
To help explain, I imagine the pseudocode would look something like:
div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)
Hi I am trying to set href using Jquery inside click event of RadioButtonList but that doesnt work If I take the same code to document.ready event it works fine but not in click event. Please advice.
$(document).ready(function() {
url = "Results.aspx?latitude=" +latitude + "&Longitude=" + longitude;
$("a[href='http://www.google.com/']").attr("href", url); // this works..
}
$('.rbl input').click(function() {
id = $(this).parent().children("input").val();
url = "Results.aspx?latitude=" + latitude + "&Longitude=" + longitude + "&ServiceCenterProductTypeId=" + id;
//alert(url);
$("a[href='http://www.google.com/']").attr("href", url); //this doesnt work....
});
});