I have an HTML form loaded in via ajax to a lightbox.
You can see the behaviour on the homepage of http://www.powerbuy.com.au/
In the bottom right of the page there is a Link 'Let us negotiate a deal for you' Clicking this creates a lightbox and loads the form.
The issue is that you cannot put in spaces to any of the fields, it appears to be accepting any other characters, numbers and symbols, but not spaces.
I have looked through the code for any keyCode in the JS, but I cant find anything related to spaces.
Can you replicate the issue? Can you tell me what is going on?
You can simply write below code:
$(document).ready(function(){
$("#id").keydown(function(event) {
if(event.shiftKey)
{
event.preventDefault();
}
if (event.keyCode == 32) {
event.preventDefault();
}
});
});
"id" is your textfield "id" attribute value.
Cause unknown:
Solved by converting lightbox popup from ajax load to iframe.
You can fix it by setting enableKeys : false as following:
Shadowbox.open({
title : "Nouvel Addressee",
content : $("addressee-lightbox-wrapper").innerHTML,
player : "html",
width : 920,
height : 540,
enableKeys : false,
options : {
onFinish: function() {
Event.addBehavior.reload();
}
}
});
I had similar problem. Found out, it has something with 'enableKeys' option.
There is more ways to set this option, but for some reason just this one worked for me:
Shadowbox.init({
skipsetup: true,
enableKeys: false
});
Here are some other solutions mentioned http://shadowbox.1309102.n2.nabble.com/Can-t-add-space-in-text-input-td4518072.html
Does anyone have any tips on making a pure JS image slider? I am looking to have it pause after each image and restart after going through all the images. All that I can find are jQuery plugins and I am look to do this with only JS.
i'd go for something like this:
var sliderTool = {
_totalItems : 0,
_visibleItems : 6,
_currentOffset : 0,
_timeout : null,
next : function(){
...
},
prev : function(){
...
},
play : function(){
...
},
pause : function(){
...
}
};
as a base.
every time you set timeout, save it into the _timeout field so you can clearTimeout(sliderTool._timeout) whenever you want.
next and prev can contain animations or just a simple image replacement. you can add a separate timeout for animation and for intervals between slides.
you can add an "add()" method to the sliderTool and on window.load or "body onload" add all the images and then run the start() method. you can also dynamically add images after page is loaded
maybe also add init() for autoloading and basic setup.
again, this is a basic draft of a possible solution. once you get running you'll probably run into more specific questions. Overall, as an approach, i recommend trying to come up with some solution first before asking for a general advice ;)
i have to select and deselect images and Jquery my code is working fine in Google developer console but not after i save it in my file.
This work in chrome developer console not when i have it in my code
image
This was the last question which i asked it is related to thisReference
mycode
$(document).ready(function() {
var selectpic;
$('img').click(function () {
$('img.highlight').not(this).removeClass('highlight');
$(this).toggleClass('highlight');
selectpic = $(this).attr('src');
});
});
This is actually inside a popup div.
main window which calls the above popup
function showImageUploadDialog(event) {
$(".ui-widget-overlay").show();
cdDiv();
$('#gallery').hide();
$('#upload_popup').dialog({
height : 'auto',
width : '848px',
modal : 'true',
top : '58px',
left : '559px',
resizable : 'false',
dialogClass : 'pop_up'
});
$(".ui-dialog-titlebar").hide();
}
I think it should be made global,And I don't know how to make it.
it worked after updating to the latest version of jquery!!
This answer has been taken from this post:
Fancybox problem on iPhone
This was voted as best answer but I am new and still learning at js and I am having such a difficult time putting this all together, can someone help me with some more detailed instructions?
Fancybox attempts to auto resize and center itself everytime that the
browser window is resized, and this event gets triggered a lot on
iPads and iPhones. For fancy box 1.3.4, the code which controls this
is line 608: $(window).bind("resize.fb", $fancybox.resize);
To fix the issue, I modified this part of the fancybox JS, and added
another option called "resizeOnWindowResize", which you can set to
false for iPad and iPhone users, or just disable all together.
if(currentOpts.resizeOnWindowResize) { $(window).bind("resize.fb",
$fancybox.resize); } You must also add a default value for this
option in $.fn.fancybox.defaults hash map.
Then, when calling fancybox you can utilize this new option:
$('#fancybox_link').fancybox(${'scrolling': 'no',
width: 'auto',
height: 'auto',
centerOnScroll: false,
resizeOnWindowResize : false});
I got as far as go to line 608. I really do not know what to do next. What should the final product look like after you've added "resizeonwindowResize" and the if statement?
Add this:
if(currentOpts.resizeOnWindowResize) {
$(window).bind("resize.fb", $.fancybox.resize);
}
Where you find:
$(window).bind("resize.fb", $.fancybox.resize);
Near the bottom of:
$.fn.fancybox.defaults = { //blah blah blah options here.
onComplete : function(){},
onCleanup : function(){},
onClosed : function(){},
onError : function(){},
// Add this
resizeOnWindowResize: true
};
Then save and when you call the fancybox:
$('.photo_gallery a').fancybox({
resizeOnWindowResize: false
});
This is also an alternative. Just replace the $.fancybox.resize function to as follows. It's just adding a simple userAgent check to avoid the .center call for iPhones.
$.fancybox.resize = function() {
if (overlay.is(':visible')) {
overlay.css('height', $(document).height());
}
if(!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
$.fancybox.center(true);
}
};
Javascript and jQuery (Fancybox) question
I'm using the Javascript function below for Twitter sharing (as well as other services; the function code is simplified to just Twitter for this question) that grabs the to-be-shared page URL and title and it is invoked in the link with onclick. That results in the Twitter share page loading in a pop up browser window, i.e.<img src="/images/twitter_16.png" onclick="share.tw()" />
In order to be consistent with other design aspects of the site, what I'd like to be able to do is have the Twitter share page open not in a standard browser window but in a Fancybox (jQuery) window.
Fancybox can load an external page in an iFrame when the img or href link contains a class (in this case class="iframe" ) in the link and in the document ready function in the header.
Right now, of course, when I give the iframe class to the link that also has the onclick share.tw(), I get two popups: one browser window popup with the correct Twitter share page loaded, and a Fancybox jQuery popup that shows a site 404.
How can I change the function to use Fancybox to present the Twitter share page? Is that a correct way to approach it? Or is there a better way, such as implementing the share function in jQuery, too?
Thanks...
Javascript share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480");
}
};
It is invoked, i.e.: <img src="/images/twitter_16.png" onclick="share.tw()" />
Fancybox function, invoked by adding class="iframe" in the img or href link
$(".iframe").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
No matter how you change your design, using an iframe with Twitter isn't going to work.
If you replace the URL http://twitter.com with anything else eg http://www.godaddy.com - it will work. I tried something like below:
$('h1').click(function(e) {
$.fancybox({
href : 'http://www.godaddy.com', // http://twitter.com will not work here
title : 'twitter window',
width : 640,
height : 480,
type : 'iframe'
});
});
This is because Twitter uses javascript to "break" iframes on purpose for security reasons.
So your idea of showing a FancyBox iframe in this way cannot work if using Twitter.com. There is confirmation of this and some ideas on getting around it here: (like using API calls from an iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7
For your "other services" that hopefully don't have the same restrictions (I suspect some of them might) then the other answer further down the page from wajiw seems a good compliment.
My approach would be to remove the fancybox initialization and trigger it directly from your share function:
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$.fancybox({
'href' : tpl,
'title' : title,
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
I'm not sure my syntax is correct, but something like that should work for you.
Another different attempt may be to use a dummy anchor, alter it's attributes, and trigger click on it:
jQuery(document).ready(function() {
$("#dummyLink").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
return false;
}
};
});
var share = {
tw:function(title,url) {
this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
},
share:function(tpl,title,url) {
if(!url) url = encodeURIComponent(window.location);
if(!title) title = encodeURIComponent(document.title);
tpl = tpl.replace("##URL##",url);
tpl = tpl.replace("##TITLE##",title);
$("#dummyLink").attr('href', tpl);
$("#dummyLink").attr('title', title);
$("#dummyLink").trigger('click');
return false;
}
};
HTML:
What I see is that the window.open function, is responsible for opening the new browser window. This one should go. Instead you should be setting the href of a link like This goes to iframe, and then invoke the fancybox function.
It's been a while since I've used fancybox, I prefer using jquery-ui.dialog, so I could be wrong ..
I've run into this same exact issue using the jQuery Colorbox plugin. I was trying to make Share on Twitter and Share on Facebook links that would open up in the modal box. When you would open the links, the modal box would appear, however the iFrame would be blank and only a white box would be displayed.
Unfortunately, this is expected behavior. Both the Twitter sharing page and the Facebook sharing pages have instructions to break out of the frame when the link is followed, thus the blank box you're seeing. Since the content that is being delivered by the respective sites are not under your control, there is no way to stop this.
Its impossible with twitter as others noted.
If you View Source of Twitter homepage, you will see a small script like this just below the body tag.
<script>
if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location;
setTimeout(function() {
document.body.innerHTML = ""
}, 1);
window.self.onload = function() {
document.body.innerHTML = ""
}
};
</script>
Which means if you are in an iframe(self != top), pull out a blank page.
No workarounds are possible.
Perhaps take a look at http://platform.twitter.com/widgets.js and see how Twitter creates their popup, then figured out if you could stick that incide a widget.