Here is my code:
$(document).ready(function(){
$(function(){
$('#post_status').iButton({
duration: 200
, easing: "swing"
, labelOn: "Active"
, labelOff: "Hidden"
, resizeHandle: "auto"
, resizeContainer: "auto"
});
});
$('a.copy').each(function(){
var $this = $(this);
$this.zclip({
path : 'path/to/ZeroClipboard.swf',
copy : function(){
var copyText = $(this).prev().val();
return copyText;
}
});
});
});
zClip attach flash objects to elements correctly, but when I click, texts are not copied to clipboard.
If I comment iButton's section, zClip will work fine.
Anyone experienced this issue?
P.S. Works fine on Firefox, but not Chrome
P.S.2 Sorry, for my bad English.
Sample Code : http://jsfiddle.net/nHSbc/
Please find out why if you comment the if line, everything works fine. just in chrome and firefox it has a problem, not in IE. It seems copy function is empty when you click a button.
It might be a miss-configuration problem in using zclip plugin.
Line 63 - 67, File : jquery.zclip.js
//if(!$.isFunction(settings.copy)){
clip.setText(settings.copy);
//} else {
// clip.setText(o.triggerHandler('zClip_copy'));
//}
Cheers
Related
This is weird. When I first go to my website my portfolio Gallery looks corrupted but when I refresh everything looks fine.
If you can look at my website on your computer and tell me if you are seeing the same thing I would appreciate it. (my website is not mobile friendly yet)
Also please let me know how I can fix this. I am using Jquery & Isotope for this feature.
http://ruben123.com/
Ok I didnt get an answer on here or anywhere else and after spending 2 days trying to figure it out with no luck I paid a guy from India $40 to find out the answer.
Basicly I needed to update the javascript code and add this code below.
$(window).on('load', function(){
//Original Code Goes inside here
});
Code Before
$('.grid').isotope({
itemSelector: '.grid-item',
});
// filter items on button click
$('.filter-button-group').on( 'click', 'li', function() {
var filterValue = $(this).attr('data-filter');
$('.grid').isotope({ filter: filterValue });
$('.filter-button-group li').removeClass('active');
$(this).addClass('active');
});
CODE AFTER
$(window).on('load', function(){
$('.grid').isotope({
itemSelector: '.grid-item',
});
// filter items on button click
$('.filter-button-group').on( 'click', 'li', function() {
var filterValue = $(this).attr('data-filter');
$('.grid').isotope({ filter: filterValue });
$('.filter-button-group li').removeClass('active');
$(this).addClass('active');
});
});
So what I think what was happening is that because I had a lot of images the isotope was not working properly.
After this change was made the images been uploading correctly on local host and online. I posting this answer just in case someone else runs into this same issue.
Here is the code I am using on my page,
<li>Sound</li>
(in a menu which appears on all pages)
<a id="Sound"><a>
(on the page where i want to link to)
I have tried adding content to the tags with an id. But only in chrome the browser will not scroll down to the tag. These anchors work in IE&FF
Any ideas?
Turns out this was a bug in certain versions of chrome, posting workaround for anyone who needs it! :)
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
The workaround posted didn't work for me, however after days of searching this finally worked like a charm so I figured it was worth sharing:
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
If you somehow ended up here like me when finding out the anchor link to a SPA site doesn't work from an external site. Yep, the browser is just working too fast to load the skeleton of the page. And it couldn't find your anchor when it loads the page.
To work around this, just add in the lifecycle of your SPA (useEffect in React and mounted in Vue) some lines to check the url hash and do the scrolling yourself.
example using React
useEffect(()=> {
if(document.location.hash === '#some-anchor') {
setTimeout(()=> {
document
.querySelector("#some-anchor")
.scrollIntoView({ behavior: "smooth", block: "start" })
}, 300)
}
}, [])
I was having this problem as well (same page navigation using links) and the solution was very easy (though frustrating to figure out). I hope this helps - also I checked IE, Firefox, and Chrome and it worked across the board (as of 05-22-2019).
Your link should looks like this:
Word as link you want people to click
and your anchor should look like this:
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
Try using :
For menu page
<li>Sound</li>
in a menu which appears on all pages
<a id="#Sound"><a>
This works well in the all versions of Chrome!
I have tested it on my browser.
This answer is for someone who encountered same problem, but scripts didn't work. Try to remove loading='lazy' and decoding='async' from all images on the page or set width and height attributes to them.
It worked like a charm for me.
Here is my version of #Jake_ answer for Chrome / angular not scrolling to a correct anchor on initial page load up using ui-router (the original answer would throw my code into 'Transition superseeded' exceptions):
angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
$document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
var hash;
var params;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
finishHook(); // Deregister the hook; the problem happens only on initial load
if ('#' in $state.params && isChrome) {
hash = $state.params['#']; // Save the anchor
params = _.omit($state.params, ['id', '#']);
$timeout(function() {
// Transition to the no-anchor state
$state.go('.', params, { reload: false, notify: false, location: 'replace' });
$timeout(function() {
// Transition back to anchor again
$state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
}, 0);
}, 0);
}
});
}, {invokeLimit: 1});
});
Not sure if this helps at all or not, but I realized my anchors in IE were working but not in Firefox or Chrome. I ended up adding ## to my anchors and this solved the issue.
example:
a href="##policy">Purpose and Policy Statement
instead of :
a href="#policy">Purpose and Policy Statement
<html>
<body>
<li>
Sound
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
use this as your code it will call the anchor tag with id value sound
Simply change the call on your link to external.
I have datepickers whose images are being set in a .js file with jquery.
Is it ok to remove the leading / as I have done in buttonImage? The jsFiddle below suggests that Chrome should be able to handle this so I'm wondering if I'm doing something else wrong.
When setting buttonImage in .datePicker(), if the location starts with "/", Chrome doesn't find the image (404 behind the scenes in Chrome DevTools). These are the lines from the .datePicker() below in question:
buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS
buttonImage: "/content/images/cal_editor.jpg", //NOT WORKING IN
CHROME but works in IE, Firefox
However, when I try to replicate this in a simple jsFiddle, it doesn't work in Chrome without the forward slash: http://jsfiddle.net/tonyleif/3z865d2r/2/.
From the jsFiddle above:
buttonImage: "/img/initializing.png" //WORKING IN ALL BROWSERS
buttonImage: "img/initializing.png" //NOT WORKING IN ALL BROWSERS
Here is the full .datePicker function that is being called in my app:
var $calendarButton = $(me).datepicker({
dateFormat: "dd-M-yy",
showOn: "button",
buttonImage: "content/images/cal.png", //WORKING IN ALL BROWSERS
//buttonImage: "/content/images/cal.png", //NOT WORKING IN CHROME but works in IE, Firefox
buttonImageOnly: true,
beforeShowDay: oneDayOnlyMethod,
altField: alternateField,
onSelect: function() {
if ($(me).hasClass('searchItem')) {
APP.SearchTable.AddDateFilter($(me));
}
var pairedName = $(me).attr('paired-date-picker');
if (pairedName !== undefined && pairedName.length > 0) {
var d = $(this).val();
if (isValidDate(d.valueOf())) {
var pairedControl = $('#' + pairedName);
if (pairedControl.val() == "" || pairedControl.val() == "DD-MMM-YY") {
pairedControl.val(d);
}
}
}
$(me).change();
}
}).next(".ui-datepicker-trigger").addClass("calendar-button");
Let me know if you need more code that this. I'm trying not to include too much text initially.
One more thing I should note is that when I'm running the site locally with Visual Studio 2013, I don't have this issue. It only happens when I publish to the server.
The idea behind the leading slash is that it makes the whole URL relative to the root of the site (http://sitename.blah/). Without the slash, you get the relative path of where the lookup originated.
My guess is that you're attempting to get the image from a directory other than the root, which is why it works without the slash on all browsers.
Comparing your code to the jsFiddle is fine, but you need to also compare the file paths and where they are relative to the site root. In jsFiddle, the img folder is at the root of the site.
So to answer your question, no, it's not ok to leave off the slash unless you mean to get the file from the relative directory.
i have a chrome extension which automatically open a window using
window.open();
when user open some specific websites.
what i want is the new window which i open from the background script through window.open() should be displayed behind the current webiste opened by the user.
i have tried window.open properties like alwaysLowered=1, z-lock=1 etc. but not working.
Also tried.....
var w = window.open('url');
if(w){
w.blur();
window.focus();
}
all these have no effect on chrome. can anybody help?
If you don't need the handle to the opened window (returned by window.open), you can use the chrome.windows API's methods create and update:
In background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({ url: "http://www.google.com/" }, function(win) {
chrome.windows.update(win.id, { focused: false });
});
});
Theoretically, passing the focused: false property in the createInfo argument should achieve the same result in one step, but it is not working for me with Chrome version 31.0.1650.57 on Windows.
UPDATE:
The above code seems to not "blur" the window on Macs. To overcome this (while determining the position and size of the new window - as per OP's comment) use the following code:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.windows.create({
url: "http://www.google.com/",
width: 430,
height: 150,
top: top_popup,
left: left_popup
}, function(win) {
chrome.windows.update(tab.windowId, { focused: true });
});
});
chrome.windows.getCurrent(function(winCurrent){
chrome.windows.create({url:url, function(win){
chrome.windows.update(winCurrent.id, {focused: true});
});
});
Try this, its fast so viewer doesn't feel much
I found very strange problem in Chrome when using # in URL. If # doesn't exist - it's Ok, but when I set #something - page is loaded, tinyMCE is still loading (focus is on the top) and after complete and textarea changed to rich text editor then focus is changed to the middle of page. DO you have any suggestions how to fix it?
Thanks :)
This should do the trick:
$(document).ready(){
document.location.href = "#";
};
Another try: Put this in your tinymce init function
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
document.location.href = "#";
});
},