EDIT
OK. So I found the problem. It is owl carousel's auto height function. If I remove it the images will load. However, I need that function because the images are all different sizes! What should I do?
Owl carousel seems not to be loading any of the slides. Not sure why because when I preview just locally it works perfectly fine.
Site: http://imdarrien.com/
See the image below (from developer console)
As seen in the image above, you have an error in your Javascript.
Replace
$("#name").mouseover(function () {
$('.slider').stop().animate({
width: $('#name').width()
}, 1000);
}).mouseout(function () {
$('.slider')..stop()animate({
width: 0
}, 1000);
});
with
$("#name").mouseover(function () {
$('.slider').stop().animate({
width: $('#name').width()
}, 1000);
}).mouseout(function () {
$('.slider').stop()animate({
width: 0
}, 1000);
});
Notice the .. in $('.slider')..stop()animate({.
UPDATE
I would recommend you to use the debugger tools to find and solve such simple script issues yourself. Use f12 key to open the debugger tools in chrome.
Related
My webpage need to show about 40 images. For the amount to image to be downloaded from server, it cause 429 error randomly.
I want to guarantee my websites to show all the images for advertisement.
how can I avoid 429 too many requests error? Is there any work around?
I use lazy loading to solve this problem.
image won't be requested to server if user not scroll down to image tag itself.
First I set data-srcto which I want to apply lazy loading.
<img data-src="../img2.png" class="lazy"/>
<img data-src="../img2.png" class="lazy"/>
<img data-src="../img2.png" class="lazy"/>
inject script after body tags.
here I wrote js script
document.addEventListener("DOMContentLoaded", function () {
const lazyLoadImages = document.querySelectorAll(".lazy");
let lazyLoadThrottleTimeout;
function lazyLoading() {
if (lazyLoadThrottleTimeout) {
clearTimeout(lazyLoadThrottleTimeout);
}
lazyLoadThrottleTimeout = setTimeout(function () {
const scrollTop = window.pageYOffset;
lazyLoadImages.forEach(function (image) {
if (image.offsetTop < window.innerHeight + scrollTop) {
image.src = image.dataset.src;
image.classList.remove("w_lazy");
}
});
if (lazyLoadImages.length) {
document.removeEventListener("scroll", lazyLoading);
window.removeEventListener("resize", lazyLoading);
window.removeEventListener("orientationchange", lazyLoading);
}
}, 35);
}
document.addEventListener("scroll", lazyLoading);
window.addEventListener("resize", lazyLoading);
window.addEventListener("orientationchange", lazyLoading);
});
the main idea is eventListener "scroll" and "resize" wait until user scrolling down to image tag, put src image path using data-src
you can use IntersectionObserver rather than eventListener, then you will need polyfill for IE user.
I'm trying to use https://github.com/mapsplugin/cordova-plugin-googlemaps in framework7 project
but I'm facing a problem
as i navigate to the map page The image is loaded but wasn't displayed
I think the issue is z-index
I tried that solution
https://github.com/mapsplugin/cordova-plugin-googlemaps/issues/2028
but doesn't work
this is the page before map page
the red div is the place where image should display
after functions run i see that instead of map
I use this code to navigate to the map page
success: function (response) {
var responseObj = JSON.parse(response)
console.log(responseObj);
this.$root.navigate("/theMapPage/")
}
I found the solution
as I posted in comment that the plugin make the map behind the application
so I hide all pages and show the current page only
map.one(plugin.google.maps.event.MAP_READY, function () {
$$('.page').hide()
$$('.page.page-current').show()
map.clear();
map.getMyLocation(onSuccess, onError);
});
at end just show all pages again
pageAfterOut: function () {
// page has left the view
$$('.page').show()
}
On Google Chrome, printing a Highmap makes it resize and stick to the left. But the map won't take its initial shape after printing. See this Fiddle : http://jsfiddle.net/5u6z7csf/1/
The code is very basic :
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=germany.geo.json&callback=?',
function (geojson) {
var data = Highcharts.geojson(geojson, 'map');
$('#container').highcharts('Map', {
series: [{
data: data
}]
});
});
I tested it on IE and Firefox and it works fine using them.
Is there a way to walk around this problem ?
Thank you for the reporting, it is requested here
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
on this page there is a button with a jQuery effect. I want to speed up the animation and see how it will look like. So I opened up the inspector and notices there is a fade effect with 500 speed. I want to chagne this to 100 and see what it'll look like. How can I do this using the consoles script window? Thanks
You can run the following code in your console window, the script just remove the element and add it again you can change the speed in fadeTo()
$(".hover").remove();
$('.otherbutton,.homebutton,.downloadbutton,.donatebutton')
.append('<span class="hover"></span>').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(200, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
If you open the elements tab and expand the section of code you are interested in you can double click the code to edit it.