Show dynamic content html page
|
Show In this tutorial, I will show you how to show/hide dynamic content based on URL parameters for any web page. This solution uses HTML, CSS and JavaScript instead of backend coding, so you will be able to use it with Marketo, Pardot, or any other system that allows a bit of custom code. The HTMLWrap each one of your dynamic content sections in a DIV and add a class called dynamic-content. Also, give each DIV a unique ID. We will reference these later in the JavaScript.
The CSSThere’s only one line of CSS needed to hide all the elements on the page since JavaScript will be used to show/hide the content.
The JavaScriptThis is the complicated part. First, we need to parse the URL and check for a specific parameter. For this example I will be using the parameter name “dc”, so in this case, my URL would look like this: https://jennamolby.com/my-webpage?dc=mycontent This is the piece of code to parse the URL. You can change “dc” to be whatever parameter name you want.
Use jQuery to show/hide contentTo make things easier, we’ll use jQuery to show/hide the content, in conjuction with the javascript. You can add in as many conditions as you want, just make sure you always include default content just in case parameters are misspelled or not in the URL.
The full javaScript codeHere’s the full piece of javascript and jQuery code.
Questions?Email me, send me a tweet @jennamolby, or leave a comment Receive my latest posts directly to your inboxHow do I display dynamic content in HTML?How to Display Dynamic Content on a Page Using URL Parameters. The HTML. Wrap each one of your dynamic content sections in a DIV and add a class called dynamic-content. ... . The CSS. ... . The JavaScript. ... . Use jQuery to show/hide content. ... . The full javaScript code. ... . Questions?. How do I change dynamic content in HTML?The easiest way to modify the content of an HTML element is by using the innerHTML property.. The HTML document above contains an element with id="id01".We use the HTML DOM to get the element with id="id01". A JavaScript changes the content ( innerHTML ) of that element to "New Heading". How do I create a dynamic HTML page?Follow these general steps to successfully design and create a dynamic website.. Design the page. A key step in designing any website—whether static or dynamic—is the visual design of the page. ... . Create a source of dynamic content. ... . Add dynamic content to a web page. ... . Add server behaviors to a page. ... . Test and debug the page.. How JavaScript can create dynamic HTML content?JavaScript can be included in HTML pages, which creates the content of the page as dynamic. We can easily type the JavaScript code within the or tag of a HTML page. If we want to add the external source file of JavaScript, we can easily add using the
|
