My application is web based and developed by MVC3 razor. I wanna show SSRS report in my page. For that I have used iframe tag to show SSRS report and its working fine. After the iframe tag I have put a div and included content in that.
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" />
</div>
<div>© 2012</div>
Problem: I facing problem in div i.e. I'm unable to view values inside the div.
I'm using IE8
An iframe is not a self-closing tag. You should change from <iframe /> to <iframe></iframe>:
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://"></iframe>
</div>
<div>© 2012</div>
iframe's can be self-closed with HTML5, but IE8 doesn't support this.
Your iframe code is missing the closing, you should change your code to
<div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div><div>
<iframe height="100" scrolling="auto" frameborder="0" width="100%" src="http://" ></iframe>
</div>
<div>© 2012</div>
Related
I want multiple images in a window. When I click on a image I want toggle out showing some info. I want this on all my images.
You didn't post the technologies you're using so I assume you are using jQuery and html:
Here is the html example:
<div>
<img class="img" data-imgid="img1" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?w=640&ssl=1" width="200px" />
<br/>
<text style="display:none;" id="img1">Image1 ......</text>
<br/><br/>
<img class="img" data-imgid="img2" src="http://www.111ideas.com/wp-content/uploads/2018/01/download-rose-image.jpg" width="200px" />
<br/>
<text style="display:none" id="img2" class="text" hide>Image2 </text>
<br/><br/>
<img class="img" data-imgid="img3" src="https://processing.org/tutorials/pixels/imgs/tint1.jpg" width="200px" />
<br/>
<text style="display:none" id="img3" class="text" hide>Finally Image3 :)</text>
</div>
and here is the jQuery code which handle the toggling process.You need to use toggle method based on the id of any text tag in the html code inside onclick function to toggle it:
$(function () {
$('.img').on('click', function () {
var txtId = $(this).attr('data-imgid');
$('#' + txtId).toggle();
});
});
You can see live demo here:
http://jsfiddle.net/gtU56/342/
I am trying to click the second tab Tab1_imgImbillsTab.
<div id="menuTabsForPageContainer" >
<div id="menuTabsForPage">
<img id="Tab1_imgHomePageTab" accesskey="H" disabled="disabled" class="imgHomePageTab" src="images/home_deselected_tab.png" alt="Home" style="border-width:0px;" />
<img id="Tab1_imgImbillsTab" accesskey="B" class="imgImbillsTab" src="images/bills_deselected_tab.png" alt="Bills" style="border-width:0px;" />
<img id="Tab1_imgArchiveTab" accesskey="C" class="imgArchiveTab" src="images/chartrack_deselected_tab.png" alt="Chart Rack" style="border-width:0px;" />
<img id="Tab1_imgPracMgmtTab" accesskey="I" class="imgPracMgmtTab" src="images/managementreporting_deselected_tab.png" alt="Business Intelligence" style="border-width:0px;" />
<img id="Tab1_imgSysToolTab" accesskey="Y" class="imgSysToolTab" src="images/systemtools_deselected_tab.png" alt="System Tools" style="border-width:0px;" />
<img id="Tab1_imgBulletinTab" accesskey="S" class="imgBulletinTab" src="images/settings_deselected_tab.png" alt="Settings" style="border-width:0px;" />
</div>
</div>
I tried several things:
browser.button(:id => 'Tab1_imgImbillsTab').click
browser.div(:id, "menuTabsForPage").div(:id, "menuTabsForPage").button(:id, "Tab1_imgImbillsTab").click
I also tried to reference it as a clickable image by referencing the "src" of the image. These tabs, I believe have JavaSceript behind them. I can not figure out what I'm doing wrong.
The code:
browser.button(:id => 'Tab1_imgImbillsTab').click
Says to find a button element or input element (of type button, reset, submit or image) that has the id "Tab1_imgImbillsTab".
However, based on the HTML, the tab is an img tag. As a result, it will never be found by the button method. Tell Watir to look for the img tag instead:
browser.img(:id => 'Tab1_imgImbillsTab').click
Hi i have a div like below
<div id="iconArrow"><img src="footer.jpg" width="35" height="27" style="position:fixed;"></div>
i need to add a text "more" on right side of image. please help me check the example image for final output.
after adding codes
It could have something to do with HTML5.
HTML5
<figure>
<img src="footer.jpg" width="35" height="27">
<figcaption>More</figcaption>
</figure>
CSS
figure {
position: fixed;
}
figure > * {
float :left;
}
Here's a jsFiddle
If you want your image to be fixed and you want to add a text beside it I suggest your wrap your image tag in another div with fixed position and do this:
<div id="wrapper" style="position: fixed;width: 35px;height: 27px;">
<img src="footer.jpg" width="35" height="27" /><div style="position: absolute;right: 0">your note</div>
</div>
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>
I am implementing an input text with an onkeyup that calls a JavaScript function. I have to put that text over an image, so I was thinking to use innerHtml inside a div that is on the image.
The div:
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
The input:
<input name="formtext1" id="ft1" style="position:absolute;width:571px;left:319px;top:194px;z-index:6" onkeyup="go(this.value)">
The JavaScript:
<script type="text/javascript">
function go(asd){
document.getElementById('uno').innerHTML=asd;
}
</script>
When I write inside input text image will disappear and text appear with background white. Can you help my work out why this happens and what I can do about it?
Setting the innerHTML removes what used to be in the div.
One way to fix this would be to change the html to
<div id="image3" style="position:absolute; overflow:hidden; left:519px; top:423px; width:474px; height:205px; z-index:4">
<div id="uno" style="z-index:20">
<div id="input"></div>
<img src="images/base-personalizzazione.png" alt="" title="" border=0 width=474 height=205>
</div>
</div>
Then use innerhtml on the input div instead.