The title is probably misleading, but I'll try to explain it better here:
I have a div with an ID of "errorBox" that I use on 3 separate forms within the same website. They aren't in the same position, however, on each form's .aspx page, which is why I've ruled out incorporating it in the master page. Additionally, I would like to be able to call said div by identity within each form's code-behind page. Is there a way I can define this div and its contents only once on my website instead of copy-pasting it on each form's .aspx page?
Related
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>
Case study: I have a website with many archive pages. Every archive page contains a list of news and also a "Load more" link at the bottom of page to load more content by Ajax.
My exact question : Is the uniqueness of ID is bounded to a single page or entire website? Should I write CSS,scripts etc. with the class of "Load more" button or its ID? I know both of ID and Class work programmatically but I am asking about the logical application of ID in software programming. Thanks.
Is the uniqueness of ID is bounded to a single page or entire website?
A single page.
There is nothing wrong with having multiple pages wherein the same ID is assigned to the same element in every page that uses the same template. In fact, there is nothing wrong with taking that same ID and reassigning it to some other element instead in a specific page, or not assigning the ID within that specific page altogether.
Whilst it is true that it is unique to a given page - take care with this, since you may have a common external CSS sheet or javascript page that is inserted and utilised site wide. Therefore if you are not careful you may inadvertently apply styling or functionality to an element that is unintended - simply because it shares an id with another element on another page. Its absolutely fine to have same id's on each page (and it may be that you want to have the same styling or function applied) - but it may not be that for all instances.
I am designing a web application using ASP.NET, and I have a template for my website.
In order to prevent code duplication, I used a Master page and designed my website template in there. Then I added as many forms as was needed and referenced to the Master page.
In next step, in order to add content to the forms, I used a ContentPlaceHolder.
Size of the body or form in Master page is not variable. moreover, I have variable amount of content in each form. As a result, the height of my form may be different from each other.
My question is then what should I do to have forms with variable height (not width and only height) at the same time using the Master page? Is there other solutions instead of using Master page to to such a work (except using the code for each form separately, because it is not a good way)?
I need to add microdata snippets to a list that is being populated by a script during the page load.
My code is written in a way that I have the basic list element in my html code, and it gets duplicated as the list is populated (this happens once when the page is loaded).
I try to add microdata to every element in the list, but when I use google's rich snippet tool it seems that it only reads the basic html snippet and not the whole list after it was populated. I do the exact same trick on a different page and there it seems to work fine (meaning i get a list of videoObjects each containing the data inserted to it) [edit: the second page was created on server side, this is why it worked on it].
Any idea how to get around problem?
As a general rule, search engines do not read content dynamically created by JavaScript. So anything your script dynamically creates will be invisible to Google. If you want them to index this content you need to create this content server side.
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.