I am working with a Web Form (html) and a CSS file and I wanna know what do I need to write in the CSS to make an action on one class or id- affect an other class or id. For example: I have a
<p class="hh">
Hello!
</p>
(^^ this p tag's class is "hh")
And another one:
<p class="gb">
Goodbye!
</p>
(^^ this p tag's class is "gb")
I wanna write something in the CSS file so that whenever I click on whatever there is in the "hh" class, it will make something change in the "gb" class, so if I click on the text "Hello!" it will make the color of the text "Goodbye!" green. Please help me! I try to find out how to do it for a long long time...
Thank you!
This sounds more like you need a javascript solution. In general you are not really able to change something on a click event in CSS. Consider following solution:
const hh = document.getElementById("hh");
const gb = document.getElementById("gb");
hh.addEventListener("click", function() {
gb.style.color = "green";
});
gb.addEventListener("click", function() {
hh.style.color = "red";
});
<div id="hh">
Hello!
</div>
<div id="gb">
Goodbye!
</div>
A common practice for doing this is by using JavaScript, which is known as the programming language of the web. If you've never used JavaScript before it can be a little bit confusing but if you have experience in other general purpose programming languages such as Python or Java then it shouldn't take much time to pick up.
To do what you are asking, there are a few possible ways to do this. I will share what I believe to be the most simple although not the most robust. You can use JavaScript events to fire off certain functions when certain particular things happen to your elements. For example, you can modify your HTML like so:
<p class="hh" onclick="doSomething()">Hello!</p>
Then, either in a separate JavaScript file linked back to your html file or in the of your html file, you would define the doSomething() function:
function doSomething(){
document.getElementsByClassName("gb")...
}
The document.getElementsByClassName() function is one way to select HTML elements from a page and modify it via JavaScript, I suggest checking out the very good JavaScript tutorials on W3Schools for more and better ways to do this, but this is the general principal. You would then modify the HTML element any way you need to.
Hope this helps!
You need to do that using JavaScript. I have attached a example for that.
$(".one").on('click', function() {
$(".two").css('color', 'red');
})
.one{
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="one"> Change below text to RED </p>
<p class="two"> Black text </p>
There is a way to use a :focus state to change the look of parents, but it wouldn't be possible to differentiate between which click caused the parent to focus.
Here's a simple example using JavaScript and jQuery.
var helloEls = document.querySelectorAll('#jsTest .hh');
var goodbyeEls = document.querySelectorAll('#jsTest .gb');
helloEls.forEach(function(elem) {
elem.addEventListener("click", function() {
goodbyeEls.forEach(function(el) {
if (el.className==='gb active'){
el.className = 'gb';
} else {
el.className = 'gb active';
}
});
});
});
var gbEls = $('#jqueryTest .gb');
$('#jqueryTest .hh').click(function(){
if (gbEls.hasClass('active')){
gbEls.removeClass('active');
} else {
gbEls.addClass('active');
}
});
.gb.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jsTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
<div id="jqueryTest">
<p class="hh">
Hello!
</p>
<p class="gb">
Goodbye!
</p>
</div>
Related
For my site, I code a button allowing to change the css of a class present in a div card. My button is located in the card-footer. Having several cards, I can't / don't think to retrieve the element with an id (as there will be X times the same ID)
In order to circumvent this system, I therefore use a parentElement which goes up to the div card
<div class="card">
<div class="card-body">
<p class="change">Change one</p>
<p class="change">Change two</p>
<p class="change">Change three</p>
</div>
<div class="card-footer">
<i id="updateData">change</i>
</div>
</div>
jQuery($ => {
$('#updateData').click(e => {
var element = e.target.parentElement.parentElement;
$('.change').css('display','none');
});
});
I would like to indicate that only the class "changes" present in my element variable and not all the classes in the page.
I don't know how to add a variable to my ".css" command, do you know how ?
Thanks in advance !
First of all since you will have multiple elements with same id that means that you should not use ID and use class instead. Id is meant to be unique. So yours id="updateData" should become class="updateData". Now you can grab all of those buttons and assign event to all of them instead of just first like you were by using id selector.
$('.updateData').click(e=> {});
Next in order to be able to use clicked element in jQuery way convert from arrow function to regular anonymous function since arrow function overrides this keyword. And now you can use jQuery to hide like
$('.updateData').click(function() {
element = $(this).parent().parent();
element.hide();
});
If you want more precise selection to hide only .change elements use
$('.updateData').click(function() {
element = $(this).parent().parent();
element.find(".change").hide();
});
Not bad, but more efficient, when you have multiple click targets, is delegation:
$(document).on("click", ".updateData", function() { ... });
Also .hide() is convenient, but rather then "change the css of a class" add a class "hidden" or something! In best case the class further describes what the element is. CSS is just on top.
I am trying to implement accessibility option on my page that would change CSS to different file when accessibility button would be clicked.
For now, all my templates extends base_generic.html, where style.css is loaded. When accessibility button would be clicked, I wish for it to change to use style_access.css for that user. How can I accomplish that?
I think a way could be, to refer in the HTML template to both CSS files, and use an onclick function with javascript, and jquery to change the id or class of the specific elements of the template.
So for example,
let's say I wanted onclick to change the CSS of an element, I could make a counter and toggle between two ids that I will have referenced in my CSS file or files.
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<button>This is a div</button>
<h1 class="potatoe" id="hello">HELLO THIS IS TEXT</h1>
<style>
#hello { color: red; }
#bye { color: blue; }
</style>
<script>
var clickCount = 0;
$("button").on("click", function() {
clickCount++;
$(".potatoe").attr("id", clickCount % 2 === 0 ? "bye" : "hello");
});
</script>
</body>
As you'll see everytime you click the button the CSS of the element will change
This is not exactly changing between CSS files but it ultimately changes the CSS of the elements you want to select.
You can implement by using JavaScript more easily:
const toggleButton = document.getElementById('button');
const workContainer = document.getElementById('work');
toggleButton.addEventListener('click', () => {
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
if(document.body.classList.contains('blue')){
localStorage.setItem('blue', 'enabled');
}else{
localStorage.setItem('blue', 'disabled');
}
});
if(localStorage.getItem('blue') == 'enabled'){
document.body.classList.toggle('blue');
toggleButton.classList.toggle('active');
workContainer.classList.toggle('blue');
}
I have a school assignment to create a one page html static.
I want to have some buttons to change the language but I don't want any addition like "index.html/en/" or "index.html?lang=en". I prefer to have it with CSS only but I don't know whether it is possible or not.
In short I just want a simply bilingual "index.html" and have buttons to change the content text.
I am new in html scripting so I'm looking for some sample code or some detailed tutorial will be help.
I suggest using JS/jQuery for that:
Have language mapping for each element that will be translated:
// Translations object:
var translations = {
'en': {
'home': 'Home',
'back': 'Back'
/* ... */
},
'lt': {
'home': 'Pradžia',
'back': 'Atgal'
/* ... */
}
};
// wait for all DOM elements to load
$(document).ready(function() {
// when button is clicked
$('.lang-btn').click(function() {
// take translations subset
var lang = translations[$(this).data('lang')];
// for each element that has "data-key" attribute
$('[data-key]').each(function() {
// change it's content to other language
$(this).text(lang[$(this).data('key')]);
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-page">
Language:
<button class="lang-btn" data-lang="en">En</button>
<button class="lang-btn" data-lang="lt">Lt</button>
<hr/>
Home
<button data-key="back">Back</button>
</div>
This code is not checking if there is such translation or not. You can improve this algo with fallback to English.
For SEO reasons I'd prefer to use /en/. Use a .htaccess file with mod_rewrite.
See here Create beautiful url’s with mod_rewrite
If it is just one page, so I assume the contain is not much. Try something simpler like:
function en() {
document.getElementById("content").innerHTML = "Example";
}
function de() {
document.getElementById("content").innerHTML = "Beispiel";
}
<div id="content">sample</div>
<button onclick="en()">English</button>
<button onclick="de()">German</button>
I am trying to create chrome extension which will read text inside the particular TAG from the Webpage ...
but not able to read value
I need to pick Text inside the tag definition excluding html tags..
here i want to read the value from the tag "definition"
output:is an overwhelming urge to have of something is often connected with money
suppose web page is like this
<div id="definition">
<div class="section blurb">
<p class="short"><i>Greed</i> is an overwhelming urge to have <i>more</i>
of something
<p class="long"><i>Greed</i> is often connected with money</p>
</div>
</div>
this is what i was trying
popup.html
<script>
var newwin = chrome.extension.getBackgroundPage();
newwin.get();
</script>
background.html
<Script>
function get()
{
var myDivObj = document.getElementById("definition");
if ( myDivObj ) {
alert (myDivObj.innerHTML);
}else{
alert ( "Alien Found" );
}
}
</Script>
I moved my script from the background page to content scrit and it worked like charm..
but was just wondering why dint work in background page..?
In my site, I would like to implement a textbox where people can input a set of strings separated by a separator character.
For example the tags textbox at the bottom of this page: tags(strings) delimited by space(separator).
To make it more clear to the user, it would make a lot of sence to give each string a different background color or other visual hint.
I don't think this is possible with a regular input[text] control.
Do you deem it possible to create something like that with javascript? Has somebody done this before me already? Do you have any other suggestions?
Basic Steps
Put a textbox in a div and style it too hide it.
Make the div look like a text box.
In the onClick handler of the div, set the input focus to the hidden text box.
Handle the onKeyUp event of the hidden text box to capture text, format as necessary and alter the innerHtml of the div.
Tis quite straightforward. I'll leave you to write your formatter but basically you'd just splitString on separator as per the Semi-Working-Example.
Simple Outline
<html>
<head>
<script language="javascript" type="text/javascript">
function focusHiddenInput()
{
var txt = document.getElementById("txtHidden");
txt.focus();
}
function formatInputAndDumpToDiv()
{
alert('Up to you how to format');
}
</script>
</head>
<body>
<div onclick="focusHiddenInput();">
Some label here followed by a divved textbox:
<input id="txtHidden" style="width:0px;" onKeyPress="formatInputAndDumpToDiv()" type="text">
</div>
</body>
</html>
Semi-Working Example
You still need to extend the click handlers to account for tag deletion/editing/backspacing/etc via keyboard.... or you could just use a click event to pop up another context menu div. But with tags and spacer ids identified in the code below that should be pretty easy:
<html>
<head>
<script language="javascript" type="text/javascript">
var myTags=null;
function init()
{
document.getElementById("txtHidden").onkeyup= runFormatter;
}
function focusHiddenInput()
{
document.getElementById("txtHidden").focus();
}
function runFormatter()
{
var txt = document.getElementById("txtHidden");
var txtdiv = document.getElementById("txtBoxDiv");
txtdiv.innerHTML = "";
formatText(txt.value, txtdiv);
}
function formatText(tagText, divTextBox)
{
var tagString="";
var newTag;
var newSpace;
myTags = tagText.split(' ');
for(i=0;i<myTags.length;i++) {
newTag = document.createElement("span");
newTag.setAttribute("id", "tagId_" + i);
newTag.setAttribute("title", myTags[i]);
newTag.setAttribute("innerText", myTags[i]);
if ((i % 2)==0) {
newTag.style.backgroundColor='#eee999';
}
else
{
newTag.style.backgroundColor='#ccceee';
}
divTextBox.appendChild(newTag);
newTag.onclick = function(){tagClickedHandler(this);}
newSpace = document.createElement("span");
newSpace.setAttribute("id", "spId_" + i);
newSpace.setAttribute("innerText", " ");
divTextBox.appendChild(newSpace);
newSpace.onclick = function(){spaceClickedHandler(this);}
}
}
function tagClickedHandler(tag)
{
alert('You clicked a tag:' + tag.title);
}
function spaceClickedHandler(spacer)
{
alert('You clicked a spacer');
}
window.onload=init;
</script>
</head>
<body>
<div id="txtBoxDivContainer">
Enter tags below (Click and Type):<div id="txtBoxDiv" style="border: solid 1px #cccccc; height:20px;width:400px;" onclick="focusHiddenInput();"></div>
<input id="txtHidden" style="width:0px;" type="text">
</div>
</body>
</html>
Cursor
You could CSS the cursor using blink (check support) or otherwise just advance and hide as necessary an animated gif.
This is quite interesting. The short answer to your question is no. Not with the basic input element.
The real answer is: Maybe with some trickery with javascript.
Apparently Facebook does something close to this. When you write a new message to multiple persons in Facebook, you can type their names this sort of way. Each recognized new name is added a bit like an tag here and has an small cross next to it for removing it.
What they seem to do, is fake the input area size by drawing an input-looking box and removing all styling from the actual input with css. Then they have plenty of logic done with javascript so that if you have added an friend as a tag and start backspacing, it will remove the whole friends name at once. etc.
So, yes, it's doable, but takes plenty of effort and adds accessibility problems.
You can look how they do that at scripts like TinyMCE, which add such features to textareas. In textareas you can use HTML to colorize text.
You can use multiple textboxes
textbox1 <space> textbox2 <space> textbox3 ....
and so on... You can then apply the background-color style to each textbox.