Iframe Webpage
191 views
Skip to first unread message
Wolf Bite
Aug 2, 2015, 5:10:02 AM8/2/15
to TiddlyWiki
i'm showing webpages in tiddly classic 2.8.1
ie
but want to be able to set where it starts the display
ie
but it ALWAYS starts top left
<html>
<iframe src ="http://weather.perthnow.com.au" marginheight="0" marginwidth="0" height="600px" width="680px" align="left" frameborder="1" ></iframe>
</html>
I've read and tried various margins, align, and others (but not sure if was a synatx or implementation issue)
I think I've heard it refered to as webpage splicing but what I want is to be able to set the start viewing location
is it even possable?
regards
ie
but want to be able to set where it starts the display
ie
but it ALWAYS starts top left
<html>
<iframe src ="http://weather.perthnow.com.au" marginheight="0" marginwidth="0" height="600px" width="680px" align="left" frameborder="1" ></iframe>
</html>
I've read and tried various margins, align, and others (but not sure if was a synatx or implementation issue)
I think I've heard it refered to as webpage splicing but what I want is to be able to set the start viewing location
is it even possable?
regards
Mat
Aug 2, 2015, 6:24:15 AM8/2/15
to TiddlyWiki
wolfbite
Aug 4, 2015, 6:03:41 AM8/4/15
to tiddl...@googlegroups.com
Thanks Mat, but not what I wanted (mind
you I didnt understand most of the article)
I DONT want to move the frame
I DO want to move the content that shows
----
Howto move content on screen
<html>
<style> #posit { position: absolute; left: 400px; top: 350px; } </style>
<div id="posit"> <iframe src="http://weather.perthnow.com.au"</iframe> </div>
</html>
----
BUT I did learn to move the IFRAME from from your info :)
Its probably me and missing the obvious
so instead of moving the Iframe, I want to move/display a portion of the content
I do work better with an example then I break & tweak to understand
any chance you can example with the above
Then you can have a example of move iframe & content to add to your webpage :)
Regards
I DONT want to move the frame
I DO want to move the content that shows
----
Howto move content on screen
<html>
<style> #posit { position: absolute; left: 400px; top: 350px; } </style>
<div id="posit"> <iframe src="http://weather.perthnow.com.au"</iframe> </div>
</html>
----
BUT I did learn to move the IFRAME from from your info :)
Its probably me and missing the obvious
so instead of moving the Iframe, I want to move/display a portion of the content
I do work better with an example then I break & tweak to understand
any chance you can example with the above
Then you can have a example of move iframe & content to add to your webpage :)
Regards
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/PaG0uPklkfU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4d89d446-85a6-4c6a-a1dc-6b97ea16eeaa%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Mat
Aug 4, 2015, 6:44:28 AM8/4/15
to TiddlyWiki
Hi again Wolf
I updated my article slightly by correcting some distracting phrasing typos. I hope it is clearer now. Based on what you say, I really think what I describe there is the solution you need.
I DONT want to move the frame
I DO want to move the content that shows
The thing is to use clip so that the iframe only shows the desired part.
But clipping actually just hides the surrounding parts, it doesn't take them away (as far as I understand)
So, if your desired part is at the lower right corner in the original iframed page, it will still be there after you hide the surrounding parts.
So you must move the whole iframe so to move up the desired part into the desired place.
I'm assuming you want the desired part to be in a tiddler, right? I.e, it should scroll up and down with the tiddler and not be fixed on the background in your TW. And the desired part should close when you close the tiddler.
The "Tiddler Hooker Method" is to make things behave like this, i.e in tandem with the tiddler (even if they are outside of the tiddler borders). Basically it uses an outer div to hook things relative to the tiddler and then another div inside this to position things at absolute distances in/from the tiddler... and then there is your content (the clipped iframe) in this inner div.
Hope this clarifies things. It does take some experimenting. The best way I know of to play with clip sizes and positioning is by using my SideEditor plugin.
<:-)
TWaddling since 1915
wolfbite
Aug 4, 2015, 9:25:59 AM8/4/15
to tiddl...@googlegroups.com
Hi Mat, thanks for trying.
I don't really care if the other parts are hidden as long as what I designate as the view area shows what I want to see.
Just incase you missed it. I'm using tiddly CLASSIC 2.8.1 (and sticking with it for awhile)
as you can see from the screenshot I can do what I want, moving & sizing, but still stuck at top left of the page to display
same window but top left view has been moved
nup! everything I try STILLS has perth now top left
:(
Regards
I don't really care if the other parts are hidden as long as what I designate as the view area shows what I want to see.
Just incase you missed it. I'm using tiddly CLASSIC 2.8.1 (and sticking with it for awhile)
as you can see from the screenshot I can do what I want, moving & sizing, but still stuck at top left of the page to display
same window but top left view has been moved
nup! everything I try STILLS has perth now top left
:(
Regards
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/PaG0uPklkfU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/83a97629-45ba-4a42-801e-89e8837e33b3%40googlegroups.com.
wolfbite
Aug 8, 2015, 3:14:32 AM8/8/15
to tiddl...@googlegroups.com
cracked it
from this
to this
(i'll position & clean up later)
can also now show the weatherzone stuff I want without the other crap :)
:)
couple of weird issues with padding but not a biggy to live with
had to delve into css but luckly my brain didnt explode
http://www.w3schools.com
http://www.w3schools.com/html/html_iframe.asp
excellent site for info with editable demo with instant result to changes
regards
ps. dont know howto mark this as [SOLVED] ops please do
from this
to this
(i'll position & clean up later)
can also now show the weatherzone stuff I want without the other crap :)
:)
couple of weird issues with padding but not a biggy to live with
had to delve into css but luckly my brain didnt explode
http://www.w3schools.com
http://www.w3schools.com/html/html_iframe.asp
excellent site for info with editable demo with instant result to changes
regards
ps. dont know howto mark this as [SOLVED] ops please do
On 02/08/15 18:24, Mat wrote:
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/PaG0uPklkfU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/4d89d446-85a6-4c6a-a1dc-6b97ea16eeaa%40googlegroups.com.
Mat
Aug 8, 2015, 3:59:04 AM8/8/15
to TiddlyWiki
Great. For people finding this thread who have the same problem it would be good if you pasted your actual solution here. I'm also curious myself.
<:-)
wolfbite
Aug 8, 2015, 4:36:47 AM8/8/15
to tiddl...@googlegroups.com
Opps sorry, wasnt thinking :)
first watch out for position: http://www.w3schools.com/css/css_positioning.asp
then working out the relationship with the div & the iframe positions (I used an firefox ruler addon to help me with the screen)
then it was trial & error with the values till it all makes sense :)
would be REALLY useful if someone could make a plugin for this that works for TWCLASSIC & TW5 HINT HINT :)
theres probably BETTER ways to do what I've done, but first rule is to get SOMETHING working THEN refine.
In the past I think I've heard it refered to webpage slicing (pulling out the bit you want)
this leaves the page intact and doesnt mess with it
possable surgestion is to pull in webpage convert to image & slice up
but it will depend on if its quicker and/or uses more/less resources
Hope this explains all
I'll still be messing with this (might setup a stand alone information screen on one of my monitors :) so any suggestions, fixes etc
permission for anyone to do what ever with this :)
Regards
this bit for perth weather scrolling page, 1 will scroll & the other will stay fixed
<html>
<style>
#my-div1
{
position : relative;
top : 0px;
left : 0px;
width : 200px;
height : 270px;
overflow : hidden;
}
#my-div2
{
position : fixed;
top : 200px;
left : 400px;
width : 200px;
height : 270px;
overflow : hidden;
}
#my-iframe
{
position : absolute;
top : -580px;
left : -380px;
width : 510px;
height : 850px;
}
</style>
<div id="my-div1">
<iframe src="http://www.bom.gov.au/index.php" id="my-iframe" scrolling="no"></iframe>
</div>
<div id="my-div2">
<iframe src="http://www.bom.gov.au/index.php" id="my-iframe" scrolling="no"></iframe>
</div>
</html>
this bit for weatherzone, compare to org http://www.weatherzone.com.au/wa/perth/perth
<html>
<meta http-equiv="refresh" content="30">
<style>
#my-div4
{
position : relative;
top : 0px;
left : 0px;
width : 660px;
height : 1790px;
overflow : hidden;
}
#my-iframe4
{
position : absolute;
top : -248px;
left : -35px;
width : 700px;
height : 2040px;
}
</style>
<div id="my-div4">
<iframe src="http://www.weatherzone.com.au/wa/perth/perth" id="my-iframe4" border="no" scrolling="no"></iframe>
</div>
</html>
first watch out for position: http://www.w3schools.com/css/css_positioning.asp
There are four different position values:
- static
- relative
- fixed
- absolute
then working out the relationship with the div & the iframe positions (I used an firefox ruler addon to help me with the screen)
then it was trial & error with the values till it all makes sense :)
would be REALLY useful if someone could make a plugin for this that works for TWCLASSIC & TW5 HINT HINT :)
theres probably BETTER ways to do what I've done, but first rule is to get SOMETHING working THEN refine.
In the past I think I've heard it refered to webpage slicing (pulling out the bit you want)
this leaves the page intact and doesnt mess with it
possable surgestion is to pull in webpage convert to image & slice up
but it will depend on if its quicker and/or uses more/less resources
Hope this explains all
I'll still be messing with this (might setup a stand alone information screen on one of my monitors :) so any suggestions, fixes etc
permission for anyone to do what ever with this :)
Regards
this bit for perth weather scrolling page, 1 will scroll & the other will stay fixed
<html>
<style>
#my-div1
{
position : relative;
top : 0px;
left : 0px;
width : 200px;
height : 270px;
overflow : hidden;
}
#my-div2
{
position : fixed;
top : 200px;
left : 400px;
width : 200px;
height : 270px;
overflow : hidden;
}
#my-iframe
{
position : absolute;
top : -580px;
left : -380px;
width : 510px;
height : 850px;
}
</style>
<div id="my-div1">
<iframe src="http://www.bom.gov.au/index.php" id="my-iframe" scrolling="no"></iframe>
</div>
<div id="my-div2">
<iframe src="http://www.bom.gov.au/index.php" id="my-iframe" scrolling="no"></iframe>
</div>
</html>
this bit for weatherzone, compare to org http://www.weatherzone.com.au/wa/perth/perth
<html>
<meta http-equiv="refresh" content="30">
<style>
#my-div4
{
position : relative;
top : 0px;
left : 0px;
width : 660px;
height : 1790px;
overflow : hidden;
}
#my-iframe4
{
position : absolute;
top : -248px;
left : -35px;
width : 700px;
height : 2040px;
}
</style>
<div id="my-div4">
<iframe src="http://www.weatherzone.com.au/wa/perth/perth" id="my-iframe4" border="no" scrolling="no"></iframe>
</div>
</html>
On 08/08/15 15:59, Mat wrote:
Great. For people finding this thread who have the same problem it would be good if you pasted your actual solution here. I'm also curious myself.
<:-)
--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/PaG0uPklkfU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3123b84e-e6d5-444c-8cab-707b79fe4802%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages