I don’t know how to write my own JavaScript from scratch, but I think I am close to what I need with these two snippets of code.
When I click anywhere on a certain page, I want the contents of a specific div to change depending on the query string present in the URL.
I have some code which achieves this, but in this format, it only works of the entire page gets refreshed.
Here is the working code which I have tested:
The problem is, I am using a filter system which alters the URL with a query string without refreshing the page, so the code above is not triggered.
From my understanding, I think I need to incorporate a mousedown event, e.g.
document.addEventListener(“mousedown”, function(){
console.log(“You did it!”);
});
I’m wondering how I can incorporate the mousedown event to run the code above when a user clicks anywhere on the page. I don’t know how to write the correct syntax for this.
I’m also wondering if I can be more specific with the mousedown event, for example can I trigger the code if a specific element is clicked (or checked), such as: input[type=checkbox]
Thanks in advance for any advice or help you can give.
Apologies, I did paste it in but somehow it has disappeared. I will try again:
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('dc');
$(document).ready(function() {
// Check if the URL parameter is apples
if (dynamicContent == 'apples') {
$('#apples').show();
}
// Check if the URL parameter is oranges
else if (dynamicContent == 'oranges') {
$('#oranges').show();
}
// Check if the URL parameter is bananas
else if (dynamicContent == 'bananas') {
$('#bananas').show();
}
// Check if the URL parmeter is empty or not defined, display default content
else {
$('#default-content').show();
}
});
</script>
Here is the working code I tested which is missing from above.
Many thanks!
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('dc');
$(document).ready(function() {
// Check if the URL parameter is apples
if (dynamicContent == 'apples') {
$('#apples').show();
}
// Check if the URL parameter is oranges
else if (dynamicContent == 'oranges') {
$('#oranges').show();
}
// Check if the URL parameter is bananas
else if (dynamicContent == 'bananas') {
$('#bananas').show();
}
// Check if the URL parmeter is empty or not defined, display default content
else {
$('#default-content').show();
}
});
</script>
Here is the full code which works to show content based on the present query string. It need the page to be refreshed for it to run. I would like to incorporate the mousedown event so the code runs when a user clicks inside the page:
Show/hide dynamic content based on URL parameters
The HTML
Wrap 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.
<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">
This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="apples" class="dynamic-content">
I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="oranges" class="dynamic-content">
I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="bananas" class="dynamic-content">
I like bananas
</div>
The CSS
There’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.
.dynamic-content {
display:none;
}
The JavaScript
This 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:
This is the piece of code to parse the URL. You can change “dc” to be whatever parameter name you want.
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
// Parse the URL parameter
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('dc');
$(document).ready(function() {
// Check if the URL parameter is apples
if (dynamicContent == 'apples') {
$('#apples').show();
}
// Check if the URL parameter is oranges
else if (dynamicContent == 'oranges') {
$('#oranges').show();
}
// Check if the URL parameter is bananas
else if (dynamicContent == 'bananas') {
$('#bananas').show();
}
// Check if the URL parmeter is empty or not defined, display default content
else {
$('#default-content').show();
}
});
</script>
I dont really understand what youre trying to do.
If you want to show the div based onnthe parameter in the url you dont need a click event listener .
When the page load the callback watch for the parameter in the url and show the div with that id.
Dont get the point to showing a div when clicking on the page.
Could you explain what you re trying to achieve?
Hi Paulo,
Many thanks for your reply. I am using a filter system on a test page:
The filter system refreshes the page URL and adds query strings based on checkboxes and other filtering options. The page then shows the relevant products without reloading.
I wish to show a div containing a description for whichever product category is selected. If a category is selected, the div should be visible (above the search tools and product grid).
If a category gets de-selected, the corresponding div should be hidden.
I tried a tweak to the code I am using, but it still doesn’t work properly.
I will post all code used below that is active on the test page:
JavaScript
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
function parseDynamicContent() {
// Give the parameter a variable name
var dynamicContent = getParameterByName('tex_project_category');
// Check if the URL parameter is breast-positioning
if (dynamicContent == 'breast-positioning') {
$('#breast-positioning').show();
}
// Check if the URL parameter is couchtops-overlays
else if (dynamicContent == 'couchtops-overlays') {
$('#couchtops-overlays').show();
}
// Check if the URL parameter is fiducial-markers
else if (dynamicContent == 'fiducial-markers') {
$('#fiducial-markers').show();
}
// Check if the URL parameter is head-neck-positioning
else if (dynamicContent == 'head-neck-positioning') {
$('#head-neck-positioning').show();
}
// Check if the URL parmeter is empty or not defined, display default content
else {
$('#default-content').show();
}
}
$(document).ready(function () {
parseDynamicContent()
});
document.addEventListener("mousedown", function () {
parseDynamicContent()
});
</script>type or paste code here
HTML
<!-- Default Dynamic Section -->
<div id="default-content" class="dynamic-content">This is the default content and should be hidden if one of the search filters is ticked</div>
<!-- Dynamic Section 1 -->
<div id="breast-positioning" class="dynamic-content">
<h3>Breast Positioning</h3>
This content should only show if the Breast Positioning filter box is checked</div>
<!-- Dynamic Section 2 -->
<div id="couchtops-overlays" class="dynamic-content"><strong>Couchtops Overlays</strong>
This content should only show if the Couchtops Overlays filter box is checked</div>
<!-- Dynamic Section 3 -->
<div id="fiducial-markers" class="dynamic-content"><strong>Fiducial Markers</strong>
This content should only show if the Fiducial Markers filter box is checked</div>
<!-- Dynamic Section 4 -->
<div id="head-neck-positioning" class="dynamic-content"><strong>Head and Neck Positioning</strong>
This content should only show if the Head and Neck Positioning filter box is checked</div>
And the CSS which is no longer working to hide dynamic data which isn’t selected:
.dynamic-content {
display:none;
}
I hope this now makes more sense.
Best wishes,
Lanx
The jQuery .show() method adds display: block as an inline style which will overwrite any selector (except when using !important).
You can use the .hide() method which adds display: none as an inline style.
There is also .toggle() which does both.
I didn’t really look at your code but I assume you can do it conditionally or just loop all the elements and hide them before the conditions that show each individual one.