Ways to update the div's appearance depending on the current website's domain

There is a piece of code that is shared between two websites, referred to as www.firstsite.com and www.secondsite.com

The goal is to conceal a specific div only when the user is on secondsite.

The access to the HTML is limited, but there is an option to add code before and after the targeted div. This includes inserting additional divs and JavaScript. jQuery is also available for use.

One approach could be as follows:

Code inserted before:

<script>    
    Implement some JavaScript that will alter the visibility of a div with the id 'hidesecondsite'
    If the domain is www.secondsite.com, then change the visibility of the div with id = hidesecondsite to hidden
</script>
<div id=hidesecondsite> <!-- Opening a wrapper div since setting an id on the actual div is not feasible -->

Code inserted after:

</div> <!-- Closing the wrapper-->

Questions: Is this method achievable?

Since my understanding of JavaScript is minimal, would someone be able to demonstrate how it could be executed?

Thank you in advance

javascripthtmlcss

Answer №1

if ( window.location.host !== "stackoverflow.com"
    && window.location.host !== "stacksnippets.net") {
  $("#divOnlyVisibleForStackOverflow").hide();
} else {
  $("#divNOTOnlyVisibleForStackOverflow").hide();
}
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOnlyVisibleForStackOverflow"> DIV 1 </div>
<div id="visibleDiv"> DIV 2 </div>
<div id="divNOTOnlyVisibleForStackOverflow"> DIV 3 </div>

Answer №2

Perhaps you could consider drafting a similar piece

(function(){
  var elementToConceal = document.querySelector('#hiddenontwo');
  if(location.host === "www.sitetwo.com") {
     elementToConceal.style.visibility = 'hidden';
  }
})();

Answer №3

<script>
    var domain = window.location.hostname;
    if(domain == 'www.siteone.com'){
        //perform action
    }else{
        //perform different action
    }
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering timeout issues with Next.JS fetch and Axios requests on Vercel production environment

I've been encountering an issue where I am unable to fetch a specific JSON data as it times out and fails to receive a response on Vercel deploy. The JSON data I'm trying to fetch is only 18KB in size and the fetch request works perfectly fine in ...

javascriptnext.jsaxiosfetch-apivercel

Combine the promises from multiple Promise.all calls by chaining them together using the array returned from

I've embarked on creating my very own blogging platform using node. The code I currently have in place performs the following tasks: It scans through various folders to read `.md` files, where each folder corresponds to a top-level category. The dat ...

javascriptnode.jspromise

Tips for transferring data to the next page with JavaScript AJAX

I am working on a webpage that includes an html select element <pre> $query = mysql_query("select * from results"); echo "<select id='date' onchange='showdata()' class='form-control'>"; while ($arr = mysql_fetch_a ...

javascriptphphtmlajax

Setting the $dirty flag to true when a value is entered in the text box, but not the other way around

When I enter a value in the text box, myForm.$dirty gets set to true. However, the flag does not revert back to false when I delete all values from the text box. Why is this happening and how can I fix it? <input name="input" ng-model="myModel.text"& ...

javascriptangularjsangularjs-directive

Is there a way to calculate the mean of radio buttons that each have their own distinct values?

My HTML page features a unique rating system created with radio buttons that resemble stars when filled in. The CSS styling gives them an appealing design. Additionally, I have included a submit button to display the selected star count when clicked. Here ...

javascript

What could be the reason for this JSON being considered "invalid"?

Despite passing validation on jsonlint, both Firefox and Chrome are rejecting this JSON: { "messages": [ { "subject": "One" }, { "subject": "Two" }, { "subject": "Three" ...

javascriptjsonvalidationsyntax-errorjsonlint

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

javascriptjqueryhtmlcss

Is your text appearing vertically in Internet Explorer?

I'm having an issue with my small single page website where the text in a form is displaying vertically instead of horizontally in Internet Explorer. The problematic part is related to "vehicle condition." Any suggestions on what I might be doing wron ...

jqueryhtmlcss

How to initiate a click event with JavaScript through C# in a WebBrowser control

Can the click function be triggered from a C# application? Below is the code that defines the function: $('#connectbtn').unbind('click').attr('disabled', false); $('#connectbtn').bind('click', ...

c#javascriptclickwebbrowser-control

JavaScript tool package with non-JavaScript alternative

Currently in search of a reliable Javascript widget toolkit that boasts a modern UI design like Dojo, incorporates AJAX for navigation, and effects. Essential requirement is flexibility and seamless fallback to an HTML-only version for console users. Whi ...

javascriptajaxuser-interfacewidgettoolkit

Create custom buttons in Material-UI to replace default buttons in a React modal window

How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...

cssreactjsmaterial-ui

Nuxt.js ERROR: Unable to find reference to 'window' object

Currently working with Nuxt.js and encountering an issue while configuring vuex-persist. Seeking assistance from someone familiar with this problem. store/index.js store/LangModule.js ...

javascriptvue.jsvuexnuxt.jspersistence

Utilizing jQuery to dynamically add classes

I am looking to dynamically add a date picker to input fields using jquery. It seems to be working fine for the first text field, but as soon as I add additional fields, it stops working. Any suggestions on how I can fix this? Thank you in advance. <ta ...

javascriptjqueryhtml

Improving an HTML list with JavaScript

My current project involves a JavaScript game similar to Scrabble. I want users to be able to create new words in the game, and have those words added to a list that is displayed on the page within a div element. However, I'm struggling to understand ...

javascripthtmllistview

Sorting items in backbone.js can be achieved by using the sortBy method

Currently, I am delving into learning backbone.js and have decided to create my own Todo application using backbone.js along with a local storage plugin. At this point, I have successfully developed the Todo app where you can add and remove tasks. However, ...

javascriptjquerysortingbackbone.jsunderscore.js

Remove the default selection when a different option is chosen using Bootstrap

I have implemented the Bootstrap-select plugin () for a multiple select dropdown on my website. Upon page load, there is a default option that is already selected. See image below: https://i.stack.imgur.com/SzUgy.jpg <select id="dataPicker" class=" ...

javascriptjquerytwitter-bootstrapbootstrap-selectbootstrap-selectpicker

AngularJS errorCallBack

I'm currently struggling with AngularJS and would really appreciate any constructive assistance. Below is the Angular code snippet I am working on: app.controller('customersCtrl', function($scope, $http) { $scope.element = function(num ...

phphtmlangularjs

Issue with the react-redux Provider

Whenever I run my basic program Index.js function test(state = []) { return state } const store = createStore(test); render( <Provider store = { store } > <App / > < /Provider > , document.getElementById('root') ...

javascriptreactjsreduxreact-redux

Using SailsJS to populate attributes transmitted through socket.io's publishUpdate event

Utilizing the built-in socket capabilities of SailsJS has proved to be quite effective for me so far. However, I've encountered a challenge that I haven't been able to find any information on. In my model, I have set it up to populate certain at ...

javascriptnode.jssocket.iosails.jswaterline

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

javascripthtmlasp.net