Change CSS of current page title (in navigation menu) - javascript

Ok, so here is my problem:
I am making this Tumblr theme, so I can only have one html, which means I can't use the typical method of adding an id to each body. So I thought about it and concluded that I need 5 javascript codes that each checks the url on which I am currently and if I am f.ex. on http://whatchoodo.tumblr.com the li #home will have border-bottom: #6DC176 solid 3px; , color: #6DC176; and font-weight: bold;
Basically I have it all thought out, but I don't know a way to check if url = sth .
Here's the temporary link to the page if it helps you visualize what I want:
http://whatchoodo.tumblr.com

Related

No styles being loaded for TipTap in React

I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}

Possible to update CSS dynamically in Plotly Dash?

Basically, I have two Plotly Dash dropdowns. I loaded custom CSS upon page load like this. Each child of my select keywords dropdown selected has a designated color in my custom CSS. Now, I have another dropdown that I want to color dependent on the colors of the first dropdown. For example:
11797656 asset has the Agedwip keyword. So, I would like it to be red like the keyword Agedwip element. This is hard to achieve because the CSS I have been using is from a static file which is loaded only upon page load. So even if I know the color 11797656 should be, I cannot actually alter the CSS and make it that color as far as I know, since it would not read the file and update the CSS in the browser.
I figured using custom javascript would make this possible, if I could directly alter the browser's CSS as opposed to just the static file that I loaded as a stylesheet. The way I am thinking about this now is...create a javascript function that will alter the color of a specific element, find a library with a javascript interpreter that has Python bindings, call the javascript function from within Python and pass it the necessary values which should update my browser's CSS.
Example:
javascript function( child_index_num, color )
alter asset css with child_index_num to give it color I want
Here is the code I currently use, to define the keyword static CSS upon page load. There are many more elements, this is just the first 3 for sake of understanding how I do this:
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(1) {
background-color: rgb(228,26,28);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(2) {
background-color: rgb(55,126,184);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(3) {
background-color: rgb(77,175,74);
border-color: "grey";
color: #fff;
}
Essentially just a color for each spot that could possibly exist. Can someone validate my idea for coloring select assets prior to me trying it, or provide a better alternative? Or is this just not possible to do/would it slow down my website drastically to implement? I am a novice with Javascript, so this solution was a bit out of my comfort zone. Feedback would be appreciated, thank you!

How to display content anywhere using html class or ids

I want to write content in a post editor and display it somewhere in the same page only.
Previously I tried:
<div class="post-header-title"></div> - Where I like to display my content.
In Post Editor:
<style>
.post-header-title:after
{
content:"Content that I'd like to display.";
display: block;
padding-top: 10px;
font-size: 40px !important;
color: rgb(187, 185, 185) !important;
font-style: italic;
}
</style>
The above step using Pseudo-elements worked perfectly and it rendered the text that I want to display in my desired place.
But it can not be highlighted and search engine can not index it. So it became useless. Here is a codepen:
http://codepen.io/anon/pen/Ggwjpj
This is just an example.
I want to do something like this.
So how can we do that? Can anyone help me please.
Jquery has many functions to add html to your web page. To reproduce something like what you did, just use the after method.
$(".post-header-title").after("<span class='text'>SomeContent</span>");
See an example

Show the URL preview in the bottom left of the browser for a clickable div

I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>

How gmail implements 'add link to mail' function?

I want to know how gmail implements its add link to mail function - is it a div which changing it's display? Is it another layer? Or is it something else?
Thanks in advance,
oz radiano.
Are you talking about one of these?
Add link form
GMail Add Link 1 http://www.kalleload.net/uploads/thumbnails/bxpwxqpauzxe.png
Floating link toolbar
GMail Add Link 2 http://www.kalleload.net/uploads/thumbnails/rrdkcg_tuqjfypvmlra.png
(click images to enlarge)
Edit:
The main secret is that you want to pull your box out of the flow of the HTML. This is easily done using position: absolute; and then position the box using top, left, right and bottom.
For example, here's a code snippet (full code example):
.box {
background: #fff;
border: 3px solid #333;
left: 2.00em;
padding: 2.00em;
position: absolute;
top: 2.00em;
}
Asynchronous javascript server callbacks with DOM manipulation. More then just swapping out the html in one big div, but updating things only where they need to be and when they need to be.

Categories

Resources