I have an API:
there is an image in API:
<img src=\"http://192.168.100.148:8111/pictures/promotion/2023/01/no_name_20230104095905985000.png\" style=\"display: block;margin-left: auto;margin-right: auto; width: 100%;\">
this is how i use it:
<div v-html="promotion.promotionInfo"></div>
it's can not displayed on chrome:
However on firefox it still works.
Please help me!
this is how i use it:
<div v-html="promotion.promotionInfo"></div>
Enter text in ABSTRACT TILE filed using send keysI'm trying to input text in ABSTRACT_TITLE using send-keys in selenium.
I tried switching frames and giving input.
<div id="reTitleCenter" class="reContent" style="height: 2.91667em;" xpath="1">
<label for="reTitleContentHiddenTextarea" style="display:none;">RadEditor hidden textarea</label>
<textarea id="reTitleContentHiddenTextarea" name="ctl00$ctl00$ctl00$phDesktop$cphContent$cphContent$reTitle" rows="4" cols="20" style="display:none;"></textarea>
<iframe frameborder="0" src="javascript:'<html></html>';" id="reTitle_contentIframe" title="Rich text editor with ID reTitle" style="width: 100%; height: 100%; margin: 0px; padding: 0px;">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
<textarea class="reTextArea reTextAreaHidden"></textarea>
</div>
the code samples I tried -
driver.switchTo().frame("reTitle");
driver.findElement(By.xpath("//div[#id='reTitleTop']/div[#class='RadEditor_Bootstrap reToolBarWrapper']")).click();
driver.findElement(By.xpath("//div[#id='reTitleTop']/div[#class='RadEditor_Bootstrap reToolBarWrapper']")).sendKeys("This is demo abstract");
OR
driver.switchTo().defaultContent();
WebElement Abstract_title = driver.findElement(By.xpath("//html//body"));
Abstract_title.sendKeys("This is abstract demo selenium");
OR
selenium.SelectFrame("xpath_of_iframe"); (Don't know how to use it)
selenium.Type("//html/body","Thank you");
Please help me with the below IE automation scenario,
I need a vba code to click on a web page label text (Log an Issue) which has been placed inside an iframe, the sample html code is given below,
<iframe name="VF304274040_1502270092884IF_1" title="Browse Categories" id="VF304274040_1502270092884IF_1" src="javascript:"<HTML></HTML>"" frameBorder="0" scrolling="auto" style="background-color: transparent; width: 100%; height: 100%; top: 0px; left: 0px;" allowTransparency="allowtransparency" onload="F(1,304274040).ol()" arviewbordercolor="null">
<head>XXXX
<body>XXXX
<div id XXXX>
.............
<div id XXXX>
......
<div>
<div class="categoryTitleLink">
<label class="cursor bold category_title" id="cat-title IDHAA5V0GQBL2AN3HRTMFOSP0OLB90" level="0" category="true" categoryname="Log+an+Issue" descr="#IDHAA5V0GQBL2AN3HRTMFOSP0OLB90" jQuery15019202206560111384="9">
....Text - Log an Issue
</body></head>
I've tried the below vba code to parse through the iframe and it's div class inner texts and found the "Log an Issue" element, but i couldn't trigger it.
VBA code:
doc1 = IE.document.frames(1).Name
For Each div In IE.document.frames(doc1).document.getElementsByTagName("div")
class_obj = div.innerText
If class_obj = "Log an Issue" Then ' the text was found by this loop
div.parentElement.Click ' this doesn't works (nothing happening)
End If
Next div
Please help!!
Try
doc1 = IE.document.frames(1).Name
IE.document.frames(doc1).document.getElementId("cat-title IDHAA5V0GQBL2AN3HRTMFOSP0OLB90").Click
The element has an id so try using it.
Currently I'm embedding Youtube videos with the following HAML code in a Twitter Bootstrap based site:
.row
.span12
%iframe.span11{ :height => "720", :frameborder => "0", :allowfullscreen => nil, :src => v.video_url }
Unfortunately, this doesn't respond well when resizing the browser or on mobile devices because of the static height.
What would be a better (more dynamic and responsive) way to implement this embedded iframe for Youtube?
Try this "Responsive video CSS", it works perfect for me: https://gist.github.com/2302238
<section class="row">
<div class="span6">
<div class="flex-video widescreen"><iframe src="https://www.youtube-nocookie.com/embed/..." frameborder="0" allowfullscreen=""></iframe></div>
</div>
<div class="span6">
...
</div>
</section>
I implemented a pure CSS solution which works great.
Here is an example of code in my view using the iframe code generated in YouTube.
<div class="video-container">
<iframe width="300" height="168" src="http://www.youtube.com/embed/MY__5O1i2a0" frameborder="0" allowfullscreen></iframe>
</div>
Here is an example of code in another view where instead of using iframe I used the body field generated from the AutoHtml gem, which is used for embedding different types of video links into a web page. This is good if you have a model where a link needs to be dynamically embedded into the same web page.
<div class="video-container">
<span style="text-align: center;"><%= #livevideo.body_html %></span>
</div>
Here is the CSS code:
.video-container {
position: relative; /* keeps the aspect ratio */
padding-bottom: 56.25%; /* fine tunes the video positioning */
padding-top: 60px; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Here is the YouTube video which explains in great detail how the code works and give one or two blog posts to check out.
http://www.youtube.com/watch?v=PL_R3zEjqEc
Bootstrap 3.2.0 comes with a several improvements and a large number of bug fixes. A framework for building websites with a responsive design, Bootstrap was missing support for responsive , and elements, feature added in this latest version.
The HTML for a responsive YouTube 16:9 video that adjusts its size based on the width of the page it is displayed in looks like this:
On your container(maybe DIV) add class="embed-responsive embed-responsive-16by9"
This is probably best done with jQuery: http://www.seanmccambridge.com/tubular/ or http://okfoc.us/okvideo/
Just to automatize #Bart's answer, I've created a simple Javascript snipped that automatically wraps iframe elements within <div class="flex-video">
$(document).ready(function() {
$('iframe').each(function() {
$(this).wrap('<div class="flex-video"></div>');
});
});
If using bootstrap, the method below is without a doubt the easiest way to implement a responsive embed:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Documentation can be found here: http://getbootstrap.com/components/#responsive-embed.
I'm trying to create a website with a background-size:100% 100% css rule. It's an image that sits behind the content and is designed in such a way that no matter the dimensions of the browser window it still works well.
I think the rule I have (as below) is clashing with Blueprint somehow.
body {
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}
This should generate a perfect 100% background image, however, the results I'm getting is that the background finishes where the content finishes, regardless of the browser window size.
Here are two images of what I want and what I'm getting:
EXPECTED
WHAT I'M GETTING (regardless of browser size)
Please help me, I'm not sure how to proceed with this.
Here is my HTML setup for the page:
<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">
</div>
</div>
</body>
If the container is 550px high then the background ends 550px down the page with an empty white space beneath that area.
I was able to replicate the effect on JSFiddle:
http://jsfiddle.net/danhanly/TurW5/4/
Would be nice if you can show us your HTML and CSS that way maybe I can pin point what your doing wrong.
You can write.
html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}
Adding a min-height to the body that is equal to the height of the background-image will ensure that the body is large enough to display the entire background.