We are using twitter bootstrap to do some redesign of our site.
The issue we have is that the part of the site we are redesigning is that this part shows content that the user is able to enter themselves including html tags .eg etc that they may have defined their own styles for.
The problem with this is that the bootstrap stylesheet would overwrite the user stylesheet or vice versa.
Is there a way to scope the stylesheet to a particular class (ie twitter stylesheet only applies to elements inside a div with class = "twitter" or something similar) without it affecting the user stylesheet and without having to modify all of the twitter classes to include a more specific selector.
We have considered using an iframe but we really need good control over the user content to be able to send/receive from it pretty easily, ie. ajax methods that trigger things on the rest of the page
Using an iframe is the way to go.
Here's some examples of how to communicate with it and access it's content.
The iframe content can call a function in the parent like this:
parent.yourFunction()
The parent can call a function in the iframe like this:
document.getElementById('iframeid').contentWindow.yourFunction();
The parent can access the iframe's html like this:
document.getElementById('iframeid').innerHTML() = "<html><body><div>some content</div></body></html>";
Not quite what you were hoping but it's the only way to have css only apply to part of a page.
Related
I'm developing a React/MaterialUI component that will be embedded in existing websites.
In order to minimise the work needed on the existing page to embed my component, I'm bundling my component into an app.js and the only change requested to the existing page is something like:
<div id="embedded-component"></div>
<script type="text/javascript" src="https://example.com/app.js"></script>
my component finds the div by ID and then mounts on that element.
Things are mostly working but I'm having issues with CSS conflicts between the CSS files on the original page (which I can't modify) and the elements of my application.
For example the original page uses text input elements with a border/padding/color that I don't want my component to "inherit".
I want my component to display the same way regardless of which page is embedded on.
Is there any strategy/tool to use in this case, so CSS classes on existing page do not affect the elements of my embedded component?
Trying to find a solution to this I've come across the Shadow DOM (e.g. https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba) but I'm not sure how widely supported this is in different browsers.
Is there any solution to this, that is widely supported by all major browsers?
I cannot use iframes and have full control of my js/css files but no control over the existing page other than the "mounting" div.
I am trying to figure out a solution for our AEM related pages. I need to change the class of the body tag in our base page based on the logic of a jsp included in a page jsps. I need this so I can style universal widget differently to deal with different height fixed headers.
So I can't really provide code examples as we are talking jsps, controllers and editable content widgets content writers can add to the page. So its hard as I am not sure how to proceed with this.
So let me try to explain what we have here. We have a jsp base page which has the html tags set, head tag set all the meta data, css and js libraries we use, and body tag sets. The base page would also contain included jsps that represent the site wide header and footer used across the site. We also would have optional sub navigations that can be added to the page for sub sections of the site and is activated based on the type of page template used. So this means a universal header plus a sub-navigation.
Then each page jsp extends the above described base page. These are the page jsps that act as different page templates for our CMS to use. Content authors can drag content, and html widgets on to the page.
We also have page templates that contain their own third level sub navigations that can be used either with the universal header alone or the universal header and the sub-navigation.
We also have a new scenario where there could be a 4th level navigation that can come in to play. This navigation would be a draggable widget in the cms.
So what I want to do is based on the page template and based on which combination of sub navigations are in play, class the body tag differently based on if the page is the universal header alone, or different classes for any of the sb navigation combinations. this is needed so as content authors drag widgets to the page or develop content I can offset content or change scroll offsets to get around different fixed header/navigation solutions
This sounds like a good case for client-side code. One option is to use JavaScript code that runs on DOM content loaded event ("ready" event if you are using jQuery) to alter the CSS class of the body tag. You could make it so each component has a particular, unique class. Then the JavaScript function could examine the page and find all the unique components and then assign the correct class to the body tag based on what it finds and the logic you write in that JavaScript function.
JSPs will be processed top to bottom on the server, so once the JSP containing the body tag has been processed you won't be able to change what was processed to the response in some subsequent JSP that is processed afterwards.
Also see
https://stackoverflow.com/a/9899701/230055
If I have html elements in JSP then what is order of execution?
You could make a call to a tag for writing out the body HTML tag and in the Java code for that tag you could examine the page node and see what other components have been included and then write out the body tag HTML accordingly if you want to do this on the server. But the key point is that you must do this before the body tag is written. Once the JSP has been processed and the body tag has been written to the response it is too late to change it in a subsequent JSP.
For example, in your JSP you would do something like this:
<myCustomTags:bodyOpeningTagBuilder />
<html>
<head>
</head>
<c:out value="${bodyOpeningTagFromBuilder}" />
...other JSPs
</body>
</html>
Is there a reliable way to know from where my page is called? I know there is the referer string in header, but it's not reliable.
I'm building a page that contains some elements (like logo for example) that should be loaded if the page is called by the same context and not loaded if it's called by outside.
I'm thinking to put a hidden attribute somewhere that could be used in any href of submit, but I don't know the better way to do it.
I'm using sitemesh and boostrap.
I could manage this using urlRewrite.
I created a rule like this:
<rule>
<from>^/popup(.*)</from>
<to>$1?popup=true</to>
</rule>
Whit this rule, I can call any url that I need using /popup before to change the layout I need.
So, using the url http://www.mypage.com/mypage.jsp will show the page fully formated and using the url http://www.mypage.com/popup/mypage.jsp will show the page without logo (what I need).
I made a drop down menu using HTML and CSS. Something like this: http://sneznipark-kg.si/
How can i put a menu in external file(so that i don't need to make changes to it on every page individually)?
I could use iframes, but the problem there is, that elements that "drop down", are only visible in iframe, not on the main page.
I found some solutions using PHP, but i cant use those, because contract with my server provider doesn't include databases (so i cant use PHP, right?).
I think you are looking for:
How to Make Website Navigations with PHP Includes:
http://www.youtube.com/watch?v=IMh2cGIX41g
Simple PHP/HTML navbar for a static website:
http://www.youtube.com/watch?v=v8PUIVn3NFE
As mentioned above, you should be able to use PHP.
If you're not opposed to jquery AND both files are on the same domain. You can use .load().
http://api.jquery.com/load/
You can use any container as a place holder. Like a div, then load the html page into the div. It will put the entire page into the div. So you probably just need to add the menu part, and not the entire html markup.
My application lets users edit documents. The editor widget, unsurprisingly, represents user documents as HTML.
I need to redisplay the documents outside the editor, but inside my site's layout. Documents need to appear in the exact same style they are presented in the editor, unaffected by my site's stylesheet. I could use the editor in read only mode, with all its buttons hidden, but I still will have scrollbar and border style issues to resolve.
I have identified the CSS file that the editor uses. How can I effectively configure a div element (the one that will contain the document) to (1) disregard all current styling, and (2) load a css file to apply to its content?
You have two options:
1.) Reset all styles on the div containing your document, and make sure your document's styles are prioritized over the reset. This could get messy.
2.) Use an iframe and load the document and styles inside the iframe.
<iframe src=".../documents/myDocument.html"></iframe>
Where "myDocument.html" is an html document containing the document and styles (treat the document html page as any other html page, and make sure it has proper head and body tags, etc.
Other options:
1.) Open the document html page inside another window.
<a href=".../document/myDocument.html" target="_blank" >Open Document</a>
2.) Render the document as a pdf, and load it into the page using a pdf viewer. (you would want to keep a backup of the original document, as the conversion back would be terrible, I presume).
Yes and no. If you want to use a div, you will want to use a stylesheet with styles defined to "reset" the css for that div. That would basically undo your site's styles, and then any new style selectors should be limited to within that div itself.
Otherwise, I would suggest using something like an iframe where you can render a truly independent document.