Given the following embedding code:
<iframe src="https://www.google.com/calendar/embed?
title=2014 PLIDAM International Symposium (Paris)&
dates=20140611/20140615&
mode=WEEK&
showNav=1&
showDate=1&
showPrint=1&
showTabs=1&
showCalendars=0&
showTz=1;
height=600&
wkst=2&
bgcolor=%23666666&
src=vdfmfbp0msroletduigs2qtkoc%40group.calendar.google.com&
color=%232952A3&
ctz=Europe%2FParis"
style=" border:solid 1px #777 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
Is there a parameter to set the hours to display/focus_on from 09:00 to 18:00 (6pm), aka the working hours ? Same for days, is there someways to just display/focus_on the rights 4 days only.
Fiddle here
There doesn't appear to be a way to do this through the API, currently. I would use javascript/jQuery to remove the elements you don't want to show in the DOM after the iframe has finished loading.
So, you could delete the Wednesday column, if you know the column index, by something like this:
$("tr").each(function() {
$(this).filter("td:eq(3)").remove();
});
You can also scroll a specific div into view:
https://stackoverflow.com/a/4884904/5129424
$("#myImage")[0].scrollIntoView();
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'm kind of new at programming so bear with me because this is probably easy to solve but I just don't really have much practise.
I've been working on an automatic "daily tip" system, with tips each day for the first 3 months (60 days).
Basically a code that changes text every day for 60 days. After the 60 days, the idea I had was for the code to to reset and go back to the first tip, on the first day.
However, I can't seem to find a way to make the code place a different text when it gets back to sunday (0). It displays the first text again, instead of the second text I had planned.
I have no idea how to make it and have been stuck for 3 days thinking about this. I heard about these forums and decided to give it a go.
I don't know if I was clear, but if not, the idea is basically to:
if - Week1, sunday(0): Tecna: Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!
if - Week 2, sunday(0): Tecna: According to cyberpsychology, the nickname and avatar you chose and represent yourself with on the web can tell others a lot about you. So, choose carefully!
If you guys could find a way to make this work, I'd be very, very grateful! I have been browsing different topics related to this, but none attempted a text change if the week ends, resetting after 7 days. I want it to reset after 60.
function Horoscopo() {
var data = new Date();
var dia = data.getDay()
var mes = data.getMonth()
var diames = data.getDate()
// Weekly Tips
if (dia == 0) {
$("strong.tip").html("<span class='formalFont'>Why do you hear the sea in a seashell? Abandoned by the mollusks and other undersea animals, shells can be put up against your ear. The ambient noise around the shell will resonate inside the shell, creating a sound similar to crashing waves!</span>");
}
if (dia == 1) {
$("strong.tip").html("<span class='formalFont'>Need any guidance with our website? Visit the forums! They're the most practical way to get help from people just like you, as well as from the minimods! Plus, you get virtual coins for each message you post!</span>");
}
if (dia == 2) {
$("strong.tip").html("<span class='formalFont'>The forums are the best hangout spots to spend time with friends! Endless chats, tons of games, contests, stories... there's just so much fun! I don't even know where to begin!</span>");
}
if (dia == 3) {
$("strong.tip").html("<span class='formalFont'>Put your feet in the spotlight! I have two choices for you: round toe boots from the 60s, with a low heel or wedge -- or heels wrapped in soft legwarmers!</span>");
}
if (dia == 4) {
$("strong.tip").html("<span class='formalFont'>Vain Pirates? Not exactly! Pirates wore earrings because they believed piercing the ear could improve eyesight. It also helped them be recognized after death!</span>");
}
if (dia == 5) {
$("strong.tip").html("<span class='formalFont'>What's the largest city in the world? It's Tokyo, the capital of Japan with a staggering 35.7 million people! Second is New York, followed by Sao Paulo and Seoul!</span>");
}
if (dia == 6) {
$("strong.tip").html("<span class='formalFont'>The plants need plenty of water this season! Whatever you do, don't water them when the sun is high in the sky, that causes the leaves to burn! The ideal time is around sunset.</span>");
}
</script>
<body onload="Horoscopo();">
<div style="width:200px; float:left; padding-bottom:10px;">
<div style="padding-bottom:0px;">
<div style="background:url(../medias/images/Horoscope/totd_stella.png); width:207px; height:auto; background-repeat:no-repeat; background-color:#78cce4;">
<table style="border: 0px; cellpadding: 0px; cellspacing: 0px">
<tbody>
<tr>
<td>
<div class="menuBlackFont" style="text-align: left; color:#FFFFFF; padding-top: 5px; padding-left: 10px; padding-bottom: 120px;">
<span>Tip of the Day</span>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_top.png); width:200px; height:33px;">
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_center.png);
width:200px; background-repeat:repeat-y;">
<div style="padding-left:15px; padding-right:15px;">
<strong class="tip"><span class="formalFont"></span></strong>
</div>
</div>
<div style="background:url(../medias/images/Horoscope/speech_bubble_bottom.png); width:200px; height:25px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
<p></p>
</div>
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>
I'm trying to figure out how software works I am not familiar with. There is an Adobe Flex page that shows a streaming video from a camera in a frame of 240 * 120. If you double click on the video frame you get a new frame which shows the video in size 480 * 240.
The problem is: the smaller frame 240 * 120 only shows the top left part of what is shown in the large video frame, which shows the full video image. The detail is the same.
What I want to achieve is that the full video is shown in the smaller frame as well.
If I search in the software for size 240 and 120 I arrive at a jsp which includes the following css snippet:
.video {
height = "120", width = "240"
}
I replaced that css snippet with
.video {
height = "100%", width = "100%"
}
but that didn't make any difference.
Does anybody have a clue?
Thanks in advance!
******* Post scriptum: *******
#Lars: I wrote my question during the weekend from the top of my head. What you suggest I already had implemented. However I discovered that I had applied it to the wrong jsp. I verified through viewing the source code in the browser that the following is deployed:
#intercomIframe {
position:absolute;
width:100%;
height:100%;
right:60;
bottom:75;
z-index:5"
}
The original values were:
#intercomIframe {
position:absolute;
width:165px;
height:128px;
right:60;
bottom:75;
z-index:5"
}
If I doubleclick on the video I get in a flex screen (extension .mxml) with the same video displayed in full. Part of the responsible code for that view:
<components:FilterBar
id="filterBar"
visible="{enableFiltering}"
>
<system:VideoSourceControlBox
id="videoSourceControl"
stationId="{station.id}"
autoSelect="true"
startSource="showVideo(true)"
stopSource="showVideo(false)"
/>
</components:FilterBar>
<mx:Box
width="100%" height="100%"
backgroundColor="#e7ebf1"
paddingTop="15" paddingBottom="15"
paddingRight="15"paddingLeft="15"
>
<mx:VBox
width="100%" height="100%" minHeight="0"
cornerRadius="8"
paddingTop="15" paddingBottom="15"
paddingRight="15" paddingLeft="15"
borderThickness="1" borderStyle="solid" borderColor="#838383"
>
<mx:VBox
width="100%" height="100%"
id="videoFrameContainer"
horizontalAlign="center"
>
</mx:VBox>
<mx:Label
id="sourceLabel"
text="{_currentSource.name}"
width="100%"
color="black"
textAlign="center"
/>
</mx:VBox>
</mx:Box>
It was this code that brought me to the idea that I should replace the pixels with percentages, alas without success.
First thing you need to use :(colon) to separate property and value in CSS but you used = (equal to). So change it.
Use below styles to display full video in a frame.
style.css
.video {
height: 100%;
width: 100%;
}
demo.html
<iframe src="video1.mp4" class="video" />
(See update at bottom)
The example given isn't valid CSS:
Property and value should be separated by a : instead of a =
Rules (property-value pair) should be separated by a ; instead of a ,
Values shouldn't be wrapped in ' or ". They can simply be left alone
An important thing to remember is that you can't just pass integers as pixel distances; you need to specify the unit, like this for example: 120px.
A second thing is that I'm assuming video is the class name; if it's the tag name the it should be video and not .video.
Summary:
.video /* or 'video' */ {
height : 100%;
width : 100%;
}
I don't know if this is causing the problems, because you haven't given us any of the other code. If the rest of the CSS is formatted like this as well that shouldn't work either. And I don't know jsp, but if that works with regular CSS, this shouldn't work.
Update:
Sorry for the late update, I didn't notice you updated the question until now. As I said, I don't know about jsp and any of the other code; I went here for the CSS. I'm sorry I can't help you anymore. The only CSS with a mistake I can fix is z-index:5", which should be z-index:5; (or without a ;), but this is probably just a typo and I'm not even sure if it's relevant.
I think it's better for the understanding of other people to not delete this answer, but I don't think this has any other value anymore.
Use following code to display full screen video
<iframe src="URL here" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">
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.