iframe is loaded successfully but element is not available, displaying blank screen - iframe

When I run the spec, it runs successfully after loading the iframe but elements are not visible from the iframe. Below are the screenshots for same. Also added
chromeWebSecurity: false
in the cypress.config.js file and imported cypress-iframe in the spec file
[[enter image description here]enter image description here(https://i.stack.imgur.com/UkloV.png)](https://i.stack.imgur.com/xSUXG.png)
Expected to get all the elements loaded after the iframe was successfully located

Related

background images reported 404

Some background images didn't show. So I open the browser console, the unloaded pics are reported 404. And then I check my css on the browser console. I find out the url of background images didn't change. But I did change them in css of web path. I also checked the css of web_war_exploded path, it is same as the css of web path. It only didn't changed on browser console.
PS: The original file name of image is src.
When I change src to image, background images are showing.
Try clearing your browser cache - this will reload the css-files.

Why I need to reload my CSS to display it properly ?

I have built a stylesheet but it doesn't appears on the page on the first load. It needs a reload to appear properly. However when I look to the source download on the dev console's network tab, I see the CSS is well downloaded. So what can lead to the non-display of my CSS on the first load since it is well loaded in a CSS module-hash's mode ?
Any hint would be great,
thanks

how to set image and text scroll in adobe capivate 9

Can anyone please help me. Am using adobe captivate 9. I have a content with image that exceeds the slide spacing, i want to set this content within the page using scroll. I have tried using text-scroll widget but i cant add images to it.
Put the image into an MS Word document and save it as an HTML web page. The result will be an HTML file and folder named "[file name]_files" in whichever folder you saved it to.
Select both the HTML file and the folder, right click, and choose Send to -> Compressed (zipped) folder in the context menu.
Dragging that ZIP folder directly onto your Captivate slide will create scrolling HTML Web Object based on the formatting of the MS Word file. It will show up in your Library in the "Web" folder.
Unfortunately, this is a feature that is missing from Captivate. The best solution I've found is to make an html file that includes the text and points to the image, then zip and import as an HTML5 Animation.

ImageResizer.Net - not resizing images

I have recently downloaded Image Resizer .Net due to being interested in to what it has to offer, you can see three libraries in the link I have supplied, I've gone ahead and downloaded all of them.
Rebuilt the project, then navigated to my view and specified a width,height and mode for an image that's getting displayed as shown here.
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/q_80/#profilePic?w=50&h=50&mode=crop">
This URL is of a car its width is 402 and its height is 300, I want to resize is just to test the functionality, but it doesn't seem to change its size? could this be to do with the fact its referencing an external image?
Update.
This is the rendered HTML
<img src="http://res.cloudinary.com/dncu6pqpm/image/upload/cunaulfla05xjzb5y2fe.jpg?w=50&h=50&mode=crop">
I read your question again and notice the part that your trying to apply it to an external image. Image Resizer will not work with external images as the images is requested directly to the external repository. In order for the image to be able to be resized it has to be served by your hosting server's IIS, where your website (with Image Resizer) is installed.
Make a quick test with a local image and see if that works.

Lightbox Display Loading Box at End of Page

I'm using Lightbox for the first time, and it's working for my images. However, for some reason, I get a strange box at the end of my page that shows the loading icon, even though there shouldn't be an image there.
The image: http://i.imgur.com/ACImB.png
Upon inspecting the element, I get the following HTML code.
<div id="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image"><div class="lb-nav"><a class="lb-prev"></a><a class="lb-next"></a></div><div class="lb-loader"><a class="lb-cancel"><img src="/z/styles/images/loading.gif"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"><img src="/z/styles/images/close.png"></a></div></div></div></div>
The strange part about this code is that I didn't make that div, it seems to have just been inserted by the script. Does anyone know what this might be and how to get rid of it?
This could easily be a problem with your css or script path.
If you look at the lightbox2 demo it displays that loading page you see and then removes it to display the loaded image. When either the javascript or stylesheets are not correctly linked it will not work properly.
Lightbox2 site: http://lokeshdhakar.com/projects/lightbox2/
You can try using (in chrome, for firefox there's firebug) right-click inspect element, go to the resources tab and expand the frames boxes until you see all the images, scripts and style sheets in a list. It'll let you know if one of them can't be found.
I had the same issue when I integrated Lightbox with an MVC site. The issue was I had referred both lightbox.js and lightbox.min.js files. I fixed the issue by removing one reference.

Resources