I have implemented the following code to lazy load images in blogspot. But now I have the problem that Google can't find the images anymore and index them. Is there a way to change the code that google finds the images again?
<script type='text/javascript'>
// Jquery LazyLoad Script by www.Bloggersstand.com
//<;b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img:not(#blogheimat #vgwortpixel)").lazyload({placeholder:"https://4.bp.blogspot.com/-oA8G9t61JXk/VtLrtkAzObI/AAAAAAAAFTY/EjT6jl2MEFM/s1600/bloggersstand.gif",effect:"fadeIn",threshold:"-50"})});//]]></script>
Related
I am using jsPDF to convert HTML components into a PDF.
Below is the code for that,
var doc = new jsPDF({orientation: 'l',unit: 'px',format: [1250,1100],compress : true});
let component=document.getElementById('document');
doc.html(component,{
margin: [10, 0, 50, 0],
callback: function (doc) {
doc.save("report.pdf");
},
x: 0,
y: 0,
});
The resulting PDF looks like.
PDF PROBLEM
I expect jsPDF to move the component to the next page whenever its find that the size of the component is bigger than the rest of the current page.
App written in React-Native expo.
I have 3 main pages in my app.
first page with a button that will open the second page(which loads the camera to scan a QR)
and the last page(called from the result of the scanned QR in second page) will load a picture from a url.
the picture will always load from the same url, BUT the picture content can change all the time.
i'm managing this using FileSystem to access the cache.
when the camera page loads i'm performing the following steps:
deleting the directory in the cache (if exists)
creating the directory again (now it's empty)
getting the picture from the url and save it in cache directory
After the scan of the QR i'm getting the file uri in the cache and sending it as a parameter to the image page.
Image page shows the correct image in the first time but when i change the image in the url and starting again in the app from the first page, i'm getting the previous image and not the updated one.
If i'm deleting the cache directory and creating it again, how is it possible i'm getting an old image?
hope i was able to explain my self
code when loading the camera page :
const imgDir = FileSystem.cacheDirectory + "AdImage/";
const dirInfo = await FileSystem.getInfoAsync(imgDir);
//check if AdImage directory exists in cache and delete if exists
if (dirInfo.exists)
{
await FileSystem.deleteAsync(imgDir);
}
//create an empty directory (since we delete b4)
await FileSystem.makeDirectoryAsync(imgDir);
const uri =
"https://myWebsite.azurewebsites.net/Images/AdvertiseImg/Image.jpeg?" + randNum;//random number for timestamp
//get the image with the uri and save it in the directory created b4 loop- call image img+compNum
const newImage = await FileSystem.downloadAsync(uri, imgDir + 'img');
once QR code is scanned :
const imgFile = FileSystem.cacheDirectory + "AdImage/img";
const uriToImageFromCacheInfo1 = await FileSystem.getInfoAsync(imgFile);
if (uriToImageFromCacheInfo1.exists) {
navigation.navigate("Image", {
uri: uriToImageFromCacheInfo1.uri //call image page with uri image saved in cache
});
On Image page assign to param that is bound to image
const [uriFromCache, setUriFromCache] = useState(navigation.getParam("uri"));
rendered view with image :
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image source={
uri: uriFromCache,
}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>
Scenario
I'm contributing for a OSS project that is build on BlazorServerSide and ElectronNET.API Version 9.31.1.
In an Electron window we would like to show images from local storage UI via <img> tag.
What I have tried:
I have tried with:
<img src="file:///home/dani/pictures/someimage.jpg" />
But doesn't work. Image doesn't appear. I have then tried to create electron window with WebSecurity = false, but also doesn't help (images appears as broken on UI):
var browserWindowOptions = new BrowserWindowOptions
{
WebPreferences = new WebPreferences
{
WebSecurity = false,
},
};
Task.Run(async () => await Electron.WindowManager.CreateWindowAsync(
browserWindowOptions,
$"http://localhost:{BridgeSettings.WebPort}/Language/SetCultureByConfig"
));
Finally, as workaround, I'm sending the images as data base64 in img src's attribute, but it looks like a dirty approach.
My Question:
My question is, how can I show on electron window picture files from local storage.
Some irrelevant info:
The open source line where I need assistance.
There are several ways to go about this, so I will try to cover the most relevant use cases. Some of this depends on the context of your project.
Access to local files behave as cross origin requests by default. You could try using the crossorigin=anonymous attribute on your image tag, but doesn't work because your local file system will not be responding with cross origin headers.
Disabling the webSecurity option is a workaround, but is not recommended for security reasons, and will not usually work correctly anyway if your html is not also loaded from the local file system.
Disabling webSecurity will disable the same-origin policy and set allowRunningInsecureContent property to true. In other words, it allows the execution of insecure code from different domains.
https://www.electronjs.org/docs/tutorial/security#5-do-not-disable-websecurity
Here are some methods of working around this issue:
1 - Use the HTML5 File API to load local file resources and provide the ArrayBuffer to ImageData to write the image to a <canvas> .
function loadAsUrl(theFile) {
var reader = new FileReader();
var putCanvas = function(canvas_id) {
return function(loadedEvent) {
var buffer = new Uint8ClampedArray(loadedEvent.target.result);
document.getElementById(canvas_id)
.getContext('2d')
.putImageData(new ImageData(buffer, width, height), 0, 0);
}
}
reader.onload = putCanvas("canvas_id");
reader.readAsArrayBuffer(theFile);
}
1.b - It is also possible to load a file as a data URL. A data URL can be set as source (src) on img elements with JavaScript. Here is a JavaScript function named loadAsUrl() that shows how to load a file as a data URL using the HTML5 file API:
function loadAsUrl(theFile) {
var reader = new FileReader();
reader.onload = function(loadedEvent) {
var image = document.getElementById("theImage");
image.setAttribute("src", loadedEvent.target.result);
}
reader.readAsDataURL(theFile);
}
2 - Use the Node API fs to read the file, and convert it into a base64 encoded data url to embed in the image tag.
Hack - Alternatively you can try loading the image in a BrowserView or <webview>. The former overlays the content of your BrowserWindow while the latter is embedded into the content.
// In the main process.
const { BrowserView, BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('file:///home/dani/pictures/someimage.jpg')
Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.
Here's the code:
// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})
// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})
// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})
// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)
// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}
I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?
The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to? The solution would be to create the timelines outside of the click event and then based on the state, play forward or reverse the animation.
I'm embedding Youtube's experimental HTML5 iframe capabilities in a website through use of the javascript API:
YouTube Player API Reference for <ifram> Embeds
I'm aware of the z-index issues this brings about, and the fix that involves adding wmode=opaque (or wmode=transparent) to the iframe url:
Fixed. My Youtube iframe z-index is ignored and is above a fixed div
When just using the javascript API, how do you set wmode to opaque:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
// if I try adding wmode: opaque here, it breaks
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1
// if I try adding wmode: opaque as a playerVar here, it breaks
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Any ideas?
Hmmmm...
Well, it appears I was hasty in posting the question. It appears that the correct form for setting wmode within the API is:
function onYouTubePlayerAPIReady() {
var player;
player = new YT.Player('player', {
width: 1280,
height: 720,
videoId: 'u1zgFlCw8Aw',
playerVars: {
controls: 0,
showinfo: 0 ,
modestbranding: 1,
wmode: "opaque"
},
events: {
'onReady': onPlayerReady,
'onPlaybackQualityChange': onPlayerPlaybackQualityChange
}
});
}
Hopefully this helps someone else.
As far as I can tell it is the default to be opaque. I tested changing wmode to transparent, opaque and removed it. When it wasn't specified it was automatically set to opaque.
I'm not sure if this always was the case, but it definitely is now.
Also remember this only applies when using the Flash player. You can disable the HTML 5 player to test this which is the default with the 'Disable Youtube™ HTML5 Player' plugin. Then just inspect element and drill down till you find the EMBED tag.