So, basically I am trying to make an overlay for a website, like a sidebar, but I don't want the css of a website to interact with my HTML.
Up to now I tried to do that with the help of an iframe (in the foreground), but the user can't click through that.
The next thing I would try is to load the webpage into an iframe and my HTML as the actual website.
But I am certain that there is a more "clean" way to do what I am trying to do.
Well, the best approach to isolate styles, which is also suggested by the comments, is to just make use of the Shadow DOM to isolate styles. But of course, the simplest approach would have been to move the iframe out of the viewport and to just have an event handler on the parent window. If I remember correctly I had the event handler for the animation of the sidebar inside the Iframe itself which is why the event didn't propagate properly, and thinking back it's kinda obvious. But maybe this helps someone... 🙂
Like #Burhan suggested in the comments, here is a link to my repo with an example approach in vanilla Typescript using the Shadow DOM: https://github.com/grievouz/chrome-extension-sidebar-example.
And here is another one in Javascript using React and an Iframe: https://github.com/segmentio/chrome-sidebar.
Related
We are using Angular.js with Bootstrap, there is no jQuery in the project.
I want to use animate.css to fade in elements on the screen when scrolling up and down.
I have found the following example that demonstrates exactly what i need to achieve:
http://wrapbootstrap.com/preview/WB01649B4
How can i do this with Angular and animate.css, are there any tutorials on this or any help would be great.
Thanks
The animation itself can be done with only animate.css. If you want it to trigger when scrolling down however, you are going to need javascript or jQuery to let the browser know when to trigger the event.
A very easy library to use for this purpose is jquery-waypoint. It simply gives you a jquery hook when you reach a certain point in the browser. You can use that hook to start the animation.
http://imakewebthings.com/jquery-waypoints/
The site has a couple of examples on it and some good documentation. If you don't feel like using a library specially for that, there are some decent tutorials that do it without plugin.
Edit: a nice blogpost on creating your own, without an extra pluging: http://blog.templatemonster.com/2014/07/07/webpage-scrolling-animation-effects-css3-jquery/
i belive what you looking is WOW js, a library designed to trigger animations as soon as you scroll to the element, is Jquery and Non Jquery versions and it plays nice with Animate CSS you can delay the trigger if you need it for the elements
More Info and Download:
WOW JS WebSite
I'm playing around with Active Desktop on an old WinXP machine.
I have my background set up with an iframe and links pointing it to certain folders to make it easier/faster to navigate. I'd like a link to change the background-image of the iframe without having to resort to make a new page everytime I find a new image I want as a background-image. While I have no clue how, I'm fairly sure it's something CSS ought be able to handle.
The catch is that Active Desktop refuses to run Javascript.
So is it possible to change the background image of a page by clicking a link without using javascript?
via CSS you could use the pseudo :hover
However, that would only last for as long as you hover. If I understand you correct, you want a permanent change of image without scripting, or just without JS? You could try WSH. Perhaps there is some useful function in there, or maybe VB?
I've created a simple tabbed content display using CSS and HTML. This code will be embedded around halfway down a much longer page with other content.
Here's the jsFiddle: http://jsfiddle.net/ollyf/R9rq2/
I've made use of :target but I'm not entirely sure how it works. Read a few tutorials but I don't fully understand the behaviour. I feel like this is bad/inefficient code.
Is there a more efficient way to achieve this tabbed content effect?
If not, how can I reveal the content without the scroll position snapping to the top of the DIV?
The :target pseudo selector is triggered by on page anchors. This means when your URL is http://www.example.com/#anchor1 #anchor1:target styles would be activated. The page is also scrolled to the #anchor1 element. This is the default functionality in browsers.
The other option for achieving a tab effect is through the use of javascript. The concept is the same with javascript, you are still toggling the display attribute via click handlers. There are several ready made scripts available for tabs. Here is one example http://jquerytools.org/demos/tabs/index.html
Hope this helps clear things up.
Here's my problem:
I have a Flash object on my page.
The user can change views within the Flash. [Not directly relevant but possibly useful: when this happens, the Flash creates a JavaScript event.]
I'd like to create separate Disqus comment threads for each Flash view, and according to Disqus's customer support, this needs a unique URL (not just hash fragment) for each comment thread.
It's not possible to write to the URL (as opposed to the hash fragment) without reloading the page (except in newer Webkit browsers).
However, I'd really like to avoid reloading the page, and having to reload the whole Flash object, each time the user changes views. But I'd really like to offer unique Disqus threads on each Flash view.
Can anyone think of a smart way I can get round this?
Could I put the Flash in an iFrame and not reload it when the rest of the page reloaded... or is that impossible?
You could put the cart before the horse and make an AJAX call to replace your main page content elements, so long as the <iframe> is a direct child of the <body> and the main content is a sibling (not a parent) of it.
That is impossible as the iFrame is part of the loaded page. The only, but very ugly, way to implement this is using a frameset..
Why not make two iframes? One as big as your body, the other one smaller, centered, and with a higher z-index.
Then just navigate the bigger iframe and leave the rest of the page alone.
Yes, it's ugly. But ugly questions ask for ugly answers :)
Is it possible to use CSS to work like frames?
What I mean is, when we use frames (left, right for example), clicking on left will refresh only the right section using the 'target' attribute.
Is it possible to create this effect with CSS?
Thanks.
Using frames is usually a bad idea
To answer your question, no, CSS cannot be used to work like frames. CSS is used to changing the style of HTML and as such, cannot actually change the content of a page. It can be used to hide content, but I don't think that is what you require.
However, I feel in this case you may be asking the wrong question. As frames are usually the wrong approach.
When starting out in web design, frames seem like a great idea. You can seperate your navigation from your content, your site will load quicker because the navigation is not loaded every time and the menu is always visible, even when the page is loading.
But, actually, frames are incredibly bad for your usability.
Your users cannot bookmark individual pages
Printing is broken
Standard features in a browser like open in new tab often breaks
Users cannot copy/paste the web address for a specific page for sending to a friend
Frames do have their uses (e.g. Google image search), but for standard navigation menus they are not recommended. Try creating a page in a dynamic server language such as PHP or ASP.NET.
These languages have ways of creating standard elements such as your navigation menu without the use of frames.
No, this has nothing to do with CSS. CSS is for styling elements only. What you are looking for is an IFRAME. And IFRAME can be given a name
<iframe name="my_iframe" src="xyz.htm"></ifram>
and then be targeted in a link.
I've got a design that relies on framed content using CSS. You can do this by using overflow:auto, however it won't do what you want, i.e. loading certain portions of a page. To do this you'd need to use some AJAX library such as jQuery to load the content area dynamically. This is quite dangerous though as your URL may not relate to the current content of the page.
You could probably do something with the overflow part of CSS.
If you set up a div with overflow:auto with a fixed width and height with alot of content you will get scrollbars. Potentially you could use anchors to get content to move to be viewed within the div.
This means that all your content is in one page and it is just moved around with the anchors. You could do a similar thing using a jquery tabs plugin too.
I have never tried this and it might need javascript to get it to work fully.