I have HTML news ticker and I want to minimize the speed of the ticker.
This is my code:
<marquee behavior="scroll" Height=20 direction="right"
onmouseover="this.stop();"
onmouseout="this.start();">
رام الله
</marquee>
<iframe src="http://geo.molg.pna.ps/l3.html" frameborder="0" style="overflow:hidden;height:94%;width:100%" height="94%" width="100%"></iframe>
Refer this link to control the speed of marquee tag.
http://www.plus2net.com/html_tutorial/html_marquee_speed.php
<marquee style="font-family:Book Antiqua; color: #FFFFFF" bgcolor="#000080" scrolldelay="500">This is an example of Marquee (Delay : 500 Milliseconds)</marquee>
Instead of marquee tag, you can use any jquery plugins like jquerynewsticker
Please try this:
scrollamount="5"
scrollamount controls the speed of text: higher the value higher is the scrolling speed
add attribute scrolldelay to marquee tag
<marquee scrolldelay="200"></marquee>
Related
I am working on html and Css, for code is getting dynamically so I cannot post the code that's why I am attaching a picture of code. My problem is how to remove Iframes from code using display none Css property. I need to remove first and second iframe from a parent of id='wrapper'.
If you have any questions please ping me once.
You can edit their style with javascript.
count = 0
var div = document.querySelector('#wrapper')
for (var iframe of div.children){
if (count < 2 && iframe.tagName === "IFRAME"){
iframe.setAttribute('style', 'display: none;')
count ++;
}
}
<div id="wrapper">
<p>This is ignored</p>
<iframe style="display:block">Removed</iframe>
<p>This is also ignored</p>
<iframe style="display:block">Removed</iframe>
<iframe style="display:block; background-color:green;"></iframe>
</div>
The count can be how many iframes you want to edit. Note, only the iframes will be removed, and not any other elements before or between the iframe because of the second condition in if loop
I am working with a client. Their webpage is using this DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I need to deliver content to pages on their site. My content looks like this
<div style="height:1000px">
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
<br/>
<br/>
<iframe frameborder="0" src="..." width="550" height="220"></iframe>
</div>
I can place the content on the clients page by giving them a couple of lines of css, and, currently, and iframe:
<style>
.iframecontent
{
background-color:blue;
position: relative;
height: 100%;
width: 100%
}
</style>
<iframe class="iframecontent" frameborder="0" src="..." width="100%" scrolling="no"> </iframe>
Because the height of the content is dynamic, I cannot provide a specific height to the client - instead I need it to stretch.
I've read many posts, but am still not sure of the best way to do this. Possibly CORS? Something else?
Here is one solution offered: http://sly777.github.com/Iframe-Height-Jquery-Plugin/ - it works on the same domain, but for cross-domain talk it relies on PostMessage which is an HTML 5 thing.
I've tried http://blog.johnmckerrell.com/2006/10/22/resizing-iframes-across-domains/ but have not be able to get it to work.
I might just get the client to set the frame to 1500px so that it should fit whatever I choose to be in the content and be done with it, but is there a better way?
Could you just set the html,body{height:100%;} then your iframe{height:100%}?
A percentage height is directly dependant on it's parent's height (of a block element). ie: iframe is 100% of what? In this case, it's parent is the body.
You may use the postMessage Plugin http://benalman.com/projects/jquery-postmessage-plugin/
It enables you to post messages from inside an iframe to the parent element. In combination the the setInterval javascript function you may send the current needed size to the parent element.
Inside the iframe
var currentIframeSize = 0;
window.setInterval(function() {
var size = $('body').outerHeight(true);
//just post, if the size has changed
if ( currentIframeSize != size ){
currentIframeSize = size;
$.postMessage({if_height : size}, source_url, parent);
}
}, 1000); //do that every second
In the head section of the parent element
id = "theIdOfYourIframe";
$.receiveMessage(function(e){
var rec_height = Number( e.data.replace( /.*if_height=(\d+)(?:&|$)/, '$1' ) );
if ( !isNaN( rec_height ) && rec_height > 0 && rec_height !== current_height ) {
current_height = rec_height;
$('#' + id).height(rec_height);
}
});
Based on those two snippets, you should get your problem solved
I updated my plugin that you tried (http://sly777.github.com/Iframe-Height-Jquery-Plugin/) and i added tutorial how to use this plugin for cross-domain fix. I hope it helps.
I have created a css class for like this:
.nav-right-EmployeeEmail {
content: url('../app_resources/nav-blue-email60.png');
padding-top:5px;
width:60px;
}
and using it in aspx file like this:
<img class="nav-right-EmployeeEmail" alt="FT Logo" /></a> <a target="_self" href="index.aspx" title="Help Desk">
I did this to make sure if the images/logos changes in future, then I only need to change it in css file and it will be reflected on every page.
The issue is that the images are not being shown in IE9. I can only see the image placeholders but not the actual image. Please note that the <img> is inside an <a> tag.
Any help will be highly appreciated!!
Yes, it makes sure that you need to change CSS only if the image is changed.
If what you're trying to do is define your logo left to some element, do it like this :
.nav-right-EmployeeEmail:before {
content: url(../app_resources/nav-blue-email60.png);
padding-top:5px;
width:60px;
}
And create your element like this for exemple :
<a class=nav-right-EmployeeEmail target="_self" href="index.aspx" title="Help Desk">some link</a>
DEMO : http://jsfiddle.net/UP88d/
I have this piece of code:
<div dojoType="dijit.layout.ContentPane" style="width:200px;margin:0;padding:0;" doLayout="true"> <button dojoType="dijit.form.Button" style="width:100%;" doLayout="true"><span style="width:200px;"> </span></button></div>
I think it is clear what I try to do.
Do you know how I could make the button take 100% of it's container's width?
Thank you.
Alright,
I got the answer at an IBM's forum, someone told me to override the dijit style:
.dijitButtonNode{
width:100%;
}
and that did the job
:-)
if you need to change the width for a single instance, changing the CSS class wouldn't be a good idea... you can make it programmatically by applying the style to the domNode of your widget... like myButtom.domNode.style.width = "100%";
if sticking with declaration, add a specifier class:
<button data-dojo-type="dijit/form/Button" type="button" class="myButtons"></button>
then, in css:
.myButtons .dijitButtonNode
{
width:100%;
}
I'm building a dummy widget for a iGoogle/Netvibes like portal. This is a "Google Maps" widget, as it only renders a map centered on a specific location.
The widget looks good in all browsers but IE8, in which the height I specify to the <div> that contains the map is not taken into account.
Here's the interesting part of the code:
<body onload="initialize()" >
<div id="map_canvas" style="height:400px; width: 100%;"></div>
</body>
I have no control on the portal, so the only thing I can modify is the widget itself. I also tried to set the height for the <body>, but same thing.
Any idea on why it's not working in IE?
Thanks!
Put this in the page you're calling with the iframe:
<script type="text/javascript">
var iframes = window.parent.document.getElementsByTagName('iframe');
for(var i = 0; i < iframes.length; i ++)
{
if(iframes[i].src == window.location)
{
iframes[i].style.height = '400px';
}
}
</script>
If you are on 2 different domains, this isn't possible, and unfortunately there is no other way when supplying the <iframe> directly to the end-user. The best solution would be to instead give the user a script tag that generates the <iframe> tag using a document.write()
Example script tag to give to your client:
<script type="text/javascript" src="http://www.example.com/widget-getter.js?client=[clientid]&widget=[widgetid]"></script>
Contents of the script that the above tag would call:
document.write('<iframe height="400px" src="http://www.example.com/widget.html"></iframe>');
Did you try using the height attribute of the iframe tag?