I was just wondering how I go about firing a magnific-popup with an iframe NOT from a video site.
I'm trying to load a page from another site that my company owns and I can't seem to get it to do anything other than open the url in a new page.
Any help would be greatly appreciated.
Let me know if code examples will help.
Simply add such option to init code of popup, and iframe src will match href.
iframe: {
patterns: {
yourcustomsource: {
index: '',
src: '%id%'
}
}
}
Also, take a look at - http://codepen.io/dimsemenov/details/jnohA
Related
I want to use a preloader animation for my website and want it to fadeout after my site's all content has loaded. I have tried this
way:
<script>
window.onload = function () {
document.querySelector(".loader-container").style.display = 'none';
};
</script>
But sometimes the animation is going infinitely and i can't see any content of my website and sometimes it vanishes before the images had
loaded.I have searched google for various alternatives but none worked.
It will be a great help if anyone could help a beginner like me(it has been 3 months) by providing a code snippet to accomplish this.
I'm trying to upload a jpeg image from local files to a webpage developed here in my job. The thing is, we need to click on the page to open the file explorer and then select the image (or drag and drop into the same spot that may be clicked).
Here is a picture from the web page
I don't know how could i do that, i was trying some code that i've seen in "https://medium.com/#chrisbautistaaa/adding-image-fixtures-in-cypress-a88787daac9c". But don't worked. I actually don't know how it works exactly, could anyone help me?
Here is my code
After #brendan's help, I was able to solve the problem by finding an input that was "hidden" under an element. However, before that I tried drag-n-drop, and cypress returned me an error (despite the successful upload). The context was, immediately after the upload, the element re-renders and cypress told me that:
.
Beside the success with input element, i was wondering how it would be possible to resolve this error, is it possible to do something internally to cypress to ignore or wait until the element re-renders back to normal?
Solutions suggested by cypress:
We're doing this using cypress-file-upload
Here's an example from our code:
cy.fixture(fileName).then(fileContent => {
cy.get(selectors.dropZoneInput).upload(
{ fileContent, fileName, mimeType: "application/pdf" },
{ subjectType: "drag-n-drop" }
);
});
For your purpose, I think this will work:
cy.fixture(imagePath).then(fileContent => {
cy.get(".upload-box").first().upload(
{ fileContent, fileName, mimeType: "image/jpeg" },
{ subjectType: "drag-n-drop" }
);
});
i use casperjs for automatical click on twitter share button. Twitter use iframe for create this buttons:
<iframe src="some src">
</iframe>
When i click it open popup window, but when i trying to login into twitter, i got error, form not found
casper.withFrame(0) { //it twitter iframe
this.fill("#twitter-widget-0 form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Why? It possible with casperjs?
I'm not familiar with Twitter widgets, but are you sure #twitter-widget-0 is not the id of the iframe you just switched in to? It seems that way, because I found code like this: https://dev.twitter.com/discussions/11450
If you switched into the iframe, you cannot access elements from the parent page anymore, and you are trying to access the iframe element, which resides in the parent.
You should just select form#update-form, because it's not a child element of #twitter-widget-0: it is just an element that is contained in the iframe.
If so, the solution is simply omitting #twitter-widget-0 from your selector inside the iframe.
casper.withFrame(0) { //it twitter iframe
this.fill("form#update-form", {
"session[username_or_email]": "myemail#email.com",
"session[password]": "password"
}, true);
});
Is there an option in DOJO where files can be uploaded by Drag and Drop from desktop to the browser?
No I dont believe so. As outlined here and here its not really possible to do without using a plugin.
Old post, but still one of those posts being found by google easily. For those interested how to do this:
Have a look at this SO answer
Dojo overview of how to use its Uploader (styled as a button)
Use addDropTarget to link a dropArea for that uploader (for HTML5-enabled browsers -- see also first link))
To make the drop target visibly react to drag events, I had to connect directly to browser events like ondragenter or ondragleave (see code snippet below)
createUploader: function() {
// ... define uploader and droptarget
d_on(this.dropArea, "dragover", d_lang.hitch(this, this.dropAreaOver));
d_on(this.dropArea, "dragleave", d_lang.hitch(this, this.dropAreaLeave));
d_on(this.dropArea, "drop", d_lang.hitch(this, this.dropAreaLeave));
}
dropAreaOver: function(evt) {
evt.preventDefault();
domClass.add(this.dropArea, "dropAreaOver");
},
dropAreaLeave: function(evt) {
evt.preventDefault();
domClass.remove(this.dropArea, "dropAreaOver");
}
I've been able to send data from the background page to the content script. but this is done using sendrequest(). I will need to send data back and forth so I'm trying to figure out the correct syntax for using the port.postmessage from background page to content script. I have already read, several times, the google page on Messaging and I don't seem to get it. I even copied the code directly from the page and tested with no result. All I'm trying to do for now is send data from background page to content script using connect as opposed to sendrequest. The response from the content script I will deal with later as code with this response has been the main thorn. I just want to understand the process one step at a time without the extra knowledge of sending a response back.
I'm not sure if this contravenes the rules of this board but can someone PLEASE give me an example of some code to do this (background page and content script excerpt, the background page is the sender).
I've asked for assistance several times on this site only to be told to read the documentation or check out sites I've already visited.
If you just want any example of opening a port from the extension to a content script, here's the simplest I can think of. The background just opens a port and sends "Hello tab!" over the port, and the content script sends a message to the background any time you click on the webpage.
I think this is pretty simple, so I don't know why you are so stressed. Just make sure that the content tab is already listening when the background tries to connect (I do this by waiting until the "complete" event).
manifest.json:
{
"name": "TestExt",
"version": "0.1",
"background_page": "background.html",
"content_scripts": [{
"matches": ["http://localhost/*"], // same as background.html regexp
"js": ["injected.js"]
}],
"permissions": [
"tabs" // ability to inject js and listen to onUpdated
]
}
background.html:
<script>
var interestingTabs = {};
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
// same as manifest.json wildcard
if (changeInfo.url && /http:\/\/localhost(:\d+)?\/(.|$)/.test(changeInfo.url)) {
interestingTabs[tabId] = true;
}
if (changeInfo.status === 'complete' && interestingTabs[tabId]) {
delete interestingTabs[tabId];
console.log('Trying to connect to tab ' + tabId);
var port = chrome.tabs.connect(tabId);
port.onMessage.addListener(function(m) {
console.log('received message from tab ' + tabId + ':');
console.log(m);
});
port.postMessage('Hello tab!');
}
});
</script>
injection.js:
chrome.extension.onConnect.addListener(function(port) {
console.log('Connected to content script!');
port.onMessage.addListener(function(m) {
console.log('Received message:');
console.log(m);
});
document.documentElement.addEventListener('click', function(e) {
port.postMessage('User clicked on a ' + e.target.tagName);
}, true);
});
Detailed documentation and easy (the most basic) examples shown in the documentation page.
Plus, a quick search in stackoverflow will allow you to see many similar questions with detailed answers.