super css noob here.
I'm using a wordpress plugin called visual composer which allows you to name a Row (it's like a block element) with a Row ID or a Class name. I'm trying to have it so when a user hovers over this row and when they click it, this clicking will simply take them to another page within my website.
It allows for an area to have the css for this class or ID that I can associate with the tag, but after searching I'm either searching the wrong thing or can't find it but I am looking for the css that would allow me to do this!
You can't only use css to link to other page, you need javascript. For example the class name is linkPage:
document.getElementsByClassName('linkPage')[0].onclick = function(){
location.href= 'some url...'
}
<div class="linkPage">linkPage</div>
You'd need to inject a bit of JS into the theme that listens on window for a click with the desired ID or class, then call window.location.href = URL or something of that nature.
CSS doesn't have the power to cause browser location changes.
CSS
CSS (Cascading Style Sheet), as its name states, defines a set of rules and properties for an HTML page you wish to style (stuff like colors, size, asf); and user interaction (even as minor as pointing to an URL) are not part of its scope.
Basic
Talking about a giant like WordPress and a strong plugin such as Visual Composer, extremely old and standard features like link/image/table asf are always to be found. You may have a look at visual composer's "Raw HTML" feature (https://vc.wpbakery.com/features/content-elements/) in combination with a regular "a" tag (http://www.w3schools.com/tags/tag_a.asp).
Editable
Asking how page linking can be achieved through editing of a CSS file, then you might as well look into different editable content types of the plugin - such as HTML or JS.
Click on table row
Best approach to have table cells/rows clickable would be by the use of JavaScript; see Adding an onclick event to a table row
Link using jQuery and Javascript (easier method):
$(".link").click(function(){
window.location.replace('https://www.example.com');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Link using pure Javascript (harder method):
x = document.querySelectorAll('.link').length;
y = 1;
while (x => y) {
document.getElementsByClassName("link")[y].onclick = function() {
window.location.replace("https://www.example.com");
};
y++;
}
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
<div class="link">link</div>
Related
Is it possible to insert -- dynamically generated -- content with CSS into the same website a second time, let's say a div-container like this: <div id="duplicate-me">dynamically generated content</div>
CSS is used to style content that exists or will eventually exist on a page. It can't load or insert dynamic content to a page. It can control showing/hiding content on a page, but the content needs to be placed there first (with the exception of psuedo-classes, but that's not really "dynamic"). As others have mentioned, Javascript/jQuery is what you are needing to use to achieve what you are wanting.
Using pseudo element's in CSS we can kind of create an element and style it in CSS. But then this has it's own limitations.
Javascript is what will essentially help you achieve this using document.createElement() method and other methods line appendChild() etc
CSS cannot be used for duplicating, but you can use javascript to duplicate div,p or any other element. We do it like
In the html file
<head>
<!--all other stuff-->
<script src='sketch.js'></script>
</head>
in the sketch.js file
var dupElem = document.createElement('div');
dupElem.id = "duplicate-me";
document.body.appendChild(dupElem);
//to manipulate the text content we do
dupElem.textContent = "some lorem ipsum"
//or else you can do a for loop
for (let i = 0;i < 3;i++){
document.body.appendChild(dupElem);
}
It is possible to make a copy of a node element but you need Javascript to do that.
<div class="duplicate-me">dynamically generated content</div>
In your Javascript:
let nodeToClone = document.getElementsByClassName("duplicate-me")[0];
let newClone = nodeToClone.cloneNode(true);
document.body.appendChild(newClone);
Please note that id needs to be unique in the document. That is why I used class.
Here you can learn more about clone.
O.K., JavaScript then. I'll look into it. Thank you for the answers. :-)
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
Hy, I have the following situation:
I am trying to change the design of my feedly-index page. (I can not change the HTML)
And I am facing a problem I coulnd't solve the past two hours.
In the HTML there are some div elements with random IDs and '_content' at the end.
Within these div's there is an img tag - what I want to do is to wrap this img-tag with an anchor-tag to make it clickable.
Situation:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
What I want as outcome:
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<a href='LINK_TO_AN_IMAGE'>
<img src='LINK_TO_AN_IMAGE'>
</a>
</div>
Is this even possible with CSS?
I could make it work with JavaScript, but the div's are loaded dynamically via AJAX:/
So the JavaScript Script would just run for the current div's but not the one which are loaded dynamically.
It's not possible with just CSS because CSS is meant or styling the page and not or adding dynamic elements to the page.
But we can do it using JS.
As you are creating those elements using ajax call. On the success callback of the ajax call, you can wrap the image with a tags.
for example:
$.ajax({
url : "/make.php"
}).done(function() {
var images = $("div img");
$.each(images, function() {
$(this).replaceWith($("<a href=''>"+this.outerHTML+"</a>")); //construct url dynamically via some variable
});
});
DEMO
If you are not able to edit the html this could be tricky.
It can't be done with pure css... css can't create links.. I mean it could be possible with js i suppose, besides that if the ids are random it makes it even more difficult.
--edit additional--
If you could wrap the whole area that holds the divs inside a div then you might have a chance with jquery...
e.g:
<div id="holderdiv">
<div id='{SOME_RANDOM_ID}_content'>
// a bit of text, a few <br> and some other tags here
<img src='LINK_TO_AN_IMAGE'>
</div>
</div>
You can then use jquery to make all instances of #holderdiv > div > img a link to the image path?
I have a requirement to white label (specifically changing header logo/menu/font colors) our existing asp.net web forms site per each customer. Customer will be able to pick the colors they want for the site.
The site is a portal and consists of multiple web sites. I don't want to use themes or different master pages because we don't have the bandwidth for restructuring the app heavily. As far as I can see I have a few options. I want to know if there is more or someone knows any other better/best way to do this. The first two options may be similar but one could be better performance.
Have a dummy css class for all the "color changing" sections - say customColor.
Examples
<div class="menu customColor" />
<div class="header customColor" />
menu and header css classes contain all styles but the color.
Programmatically add color to this css class when the master page loads. Pseudo code : Page.Header.Controls.Add(New LiteralControl("<style type=""text/css""> .customColor { color: blue }");
Have a asp.net ashx handler return whiteLabel.css that contains customColor { color:blue }; and add this css to the page dynamically.
It is not that many elements in every page that needs to change. You can have a function in each page that sets the appropriate colors from the database.
I assume my options pretty much are dynamically changing css or programmatically setting colors to individual elements.
Also I would think it may be better to do option#1 than #2 because does css get cached on #2? This will make it difficult for companies to change colors.
Does all your pages use a common MasterPage?
If so, then I have once used setting a class for body or may be a div wrapper like:
<div class='<%= GetCustomClass() %>'>
<div class="menu customColor" />
<div class="header customColor" />
</div>
GetCustomClass is a static method that will return say class1 or class2 based on customer's selection.The css will look something like:
class1.customColor{color:blue;}
class2.customColor{color:red;}
Hope that helps.
Let's rule out option 3 also, it may fail to reskin the page if a javascript error occurs during the page load.
That leaves option 1, although you might want something a bit more readable:
<style>
.menu.customColor { color: <%= menuColor %>; }
.header.customColor { color: <%= headerColor %>; }
</style>
I've got this structure:
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
Now, I want that on click to #hide:target, div#d2 disappear.
Can I do this with CSS?
You can do this with CSS!
If you change your HTML markup a little bit you can achieve this by using CSS :target
#d2:target {
display: none;
}
<div id="d1">
Text
<div id="d2">Word
My other text
</div>
You can do this with CSS but you need to use javascript to change the CSS (style) of the element.
This solution requires no plug ins (such as jQuery).
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
If you would like it to be completely functionless.
<div id="d1">
Text
<div id="d2">Word</div>
My other text
</div>
You should probably use javascript or jQuery to accomplish this.
$('#object').click(function(){
$('#tohide').hide();
});
To make it specific for this (local scope)
if($('#d2 a').attr('href')=='#hide'){
$('#d2 a').click(function(){
$('#d2').hide();
});
}
But that isn't the proper way to do it. Use classes.
You can do this with jQuery simply:
$(document).ready(function(){
$("a").click(function(){
$("#d2").hide();
});
});
I strongly believe that CSS is for style, and Javascript is for function (and HTML is for markup).
I have made the mistake of using :target and building functionality with CSS where it shouldn't be, and trust me, you are going to make a nightmare for yourself with these bad habits down the road. jQuery is going to be your best friend in situations like this. It works on ALL browsers (that support javascript) and you won't have your functionality breaking down in edge-cases and your users pissed off. Do what Jack says and use some simple jQuery. you can also use .addClass and .removeClass to change the css in other ways than just hide/show.
With css I think it isn't possible, but you could use this code that I am letting here, it is based in javascript, that can be really usefull in this situations. I am not so good at explaining but for these type of questions I recomend learning Javascript.
<div id="d1">Text</div>
<div id="d2">Word</div>
<a onclick="hide()">My other text</a>
This is your HTML file for now, I created a DOM event, when you click the , a function called hide() will run in our js file. TIP: Don't forget to link the html with de javascript file. You can do that with:
<script src="yourfilegoeshere"><script>
Now let's head in the css:
#d1 {
opacity: 1;
}
#d2 {
opacity: 1;
}
Based with this css both of them are visible. Now let's go to our Js file:
function hide() {
var d2 = document.getElementById('d2')
d2.style.opacity = '0'
}
Now if you click in your a the d2 will not be visible
I hope I helped!