I have a number of html elements on my page, for example;
<section id="top-bar">
<!-- html content -->
</section>
<section id="header">
<!-- html content -->
</section>
<div id="left">
<!-- html content -->
</div>
<section id="footer">
<!-- html content -->
</section>
The CSS background-colour and text-colour for these sections are set in the Joomla 3.x Template settings, this is my 'Brand Colour' - see the image below.
If I choose Preset 1 in the template settings then preset1.css is loaded in the website front end, if I select Preset 2 then preset2.css is loaded in the website front end etc.
My issue is that I have other custom elements on the page (e.g. <div id="left"> in the code above). The background colour and text colour for these elements aren't set or controlled via the template settings, instead I have to manually set these in a custom.css file, which works, however I have to change this custom.css file to every time I change my 'Brand Colour'.
Basically, I'd like my custom elements to take on the same 'Brand Colours' that I specify in the template configuration. WIthout me having to change the custom.css file all the time.
So, <div id="left"> background-colour and text-colour should match <section id="top-bar"> background-colour and text-colour.
Is it possible to dynamically set the CSS using JavaScript or similar?
Thanks
You can use js to get background-color of #top_bar element and add that color as background to other elements you want, in this case its siblings. Same is for text-color.
var top_bar = $('#top-bar')
var bg = top_bar.css('background-color')
var color = top_bar.css('color')
top_bar.siblings().css({
backgroundColor: bg,
color: color
})
section, div {
width: 50px;
height: 50px;
display: inline-block;
}
#top-bar {
background: #22B8F0;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="top-bar">
Text
</section>
<section id="header">
Text
</section>
<div id="left">
Text
</div>
<section id="footer">
Text
</section>
Add a class to a parent element like the body element, such as preset1 etc, then select each element as children of that, like .preset1 #left
Then the only thing you have to change is one class, and there is no worry of resynchronisation.
Related
I'm trying to link the button to the heading of the different sections on the same page but I couldn't figure out how to use.i can use a link from one class to another but how to link on the same class with a specific word. what I have done is
<Button className="sec-btn"> Get Started </Button>
I want when users click Get started button then link that to the "Antsy service" title on the same page.
<h1 className="heading-1">Antsy services</h1>
What I understand from this question is you have a href anchor tag element that when clicked, you want to scroll down the page to a different element.
You can use IDs as a form of linking between elements on the same page.
Solution
Simply give the element you want to scroll to an ID and then in the anchor tag you can provide a link to it via href.
<a href="#test">
<button> click me </button>
</a>
<div class="space"></div>
<div id="test">
<p> hello </p>
</div>
Here is a codepen for it so it's easier to see the effect visibly.
https://codepen.io/shanecreedon/pen/poJGovK
What you are looking for is anchor links.
How to create and use them:
add id="example" to some element on the page
add Scroll me to example element on top of your page
click and see what will happen
You need to use the id selector syntax like this. Heading should have an id selector...
<h1 id="heading-1">Antsy services</h1>
Then you can link to the section of the page like this:
Get Started
I see you're trying to build a Single Page Site with sections. For this, you have to use ID to all the Headers that you are about to navigate to.
Try this,
<html>
<head>
<title>Example</title>
<style>
h1{
height : 100vh;
background: skyblue;
}
h2{
height: 100vh;
background: #c0c0c0;
}
h3{
height: 100vh;
background: #a0faf9;
}
</style>
</head>
<body>
Home
Services
Contact
<h1 id="home">Home Section</h1>
<h2 id="services">Services Section</h1>
<h3 id="contact">Contact Section</h1>
</body>
</html>
I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!
Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.
You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>
I'm just picking up JS & jQuery and consider myself quite capable with HTML/CSS. I'm in the middle of building a single page front-end only website. I've got the layout nailed down with Bootstrap and now I'm just trying to figure out some of the functionality. My scenario is as follows:
There are 4 <div>s with text and an image in each of the 4 <div>s; and there is a <div> with class #content below it. There is a .on('click') listener for each of the #c1-4 divs and when the user clicks on a particular div, the #content div will change accordingly.
<div id="#c1" class="active-div">
<p>Text Here</p>
<img src="image.jpg">
</div>
<div id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
</div>
<div id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
</div>
<div id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
</div>
<div id="#content">
<!-- Content of the selected div goes here -->
</div>
By default, #c1 <div> is selected. The content that goes in to #content is mostly text but some icons and images too, with appropriate styling.
The Question: What is the best way to store & load content into the #content div? Based on my knowledge so far I believe the options are:
Hard-coding it into the JS and using .html() to set the content; although this would add quite a bit of HTML to the JS.
Hard-coding 4 different divs related to each of the 4 #c IDs and using .show() and .hide() accordingly.
Using .load() to load the content from another HTML document. However, I'm not sure how styling would be handled and how this will affect the display of the #content div.
I would also like to know the pros and cons of each of the above approaches and which one would be more suitable for future maintenance (e.g. adding a fifth, sixth #c numbered div to select & load content for).
In real world developers consider backend data to replace / append content based on user's clicks and it is just second thing how exactly you append / prepend / html or load your content to your div element. Not sure how you are going to hardcode different content according to the clicked button, I think in your case #2 & #3 should do the trick.
There is append / prepend actions you can use (they are self-explanatory I guess, but might be useful in some cases).
As I mentioned initially in ideal work you will do queries to your backend endpoints (databases, API etc..) and fetch content from there. Once done, you just style it accordingly using those divs and css (either inline or CSS table) things. Focus on overall construction!
There are a lot of ways to do this and a lot of JS frameworks out there that do it differently, but all of your options are appropriate in my opinion, especially given that you're using jQuery. I'll just talk a bit about your three options:
You can hard-code it into your JS, but you can also place the content in your HTML in a <script> tag and load it as a JavaScript string in jQuery, like they do for Underscore templates.
<script type="text/template" id="div-1">
<span>Hey, this is some content</span>
</script>
Then later in your JavaScript, just do $('#div-1').html() to get the contents of it, and you can stick that in your content div.
This option is also perfectly acceptable.
As long as you have all your css already applied to the document, dynamically changing the DOM won't affect its ability to apply styles. Just make sure you have all the rules in a stylesheet that is already loaded.
Expanding on my comment, here is how you could do it with hidden content divs and replacing html using .html()
$(function() {
var content = $('.active-div .content').html();
$('#content').html(content);
$('.item').click(function() {
$('.item').removeClass('active-div');
$(this).addClass('active-div');
content = $('.active-div .content').html();
$('#content').html(content);
});
});
.item {
cursor: pointer;
display:inline-block;
padding-right:10px;
}
.content {
display: none;
}
#content {
background: #000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item active-div" id="#c1">
<p>Text Here</p>
<img src="image.jpg">
<div class="content">Sample content 1</div>
</div>
<div class="item" id="#c2">
<p>Text 2 Here</p>
<img src="image2.jpg">
<div class="content">Sample content 2</div>
</div>
<div class="item" id="#c3">
<p>Text 3 Here</p>
<img src="image3.jpg">
<div class="content">Sample content 3</div>
</div>
<div class="item" id="#c4">
<p>Text 4 Here</p>
<img src="image4.jpg">
<div class="content">Sample content 4</div>
</div>
<div id="content">
<!-- Content of the selected div goes here -->
</div>
I have two screens say Screen 1 and Screen 2 and a HTML page with JavaScript/JQuery.
What I want to do is that split the HTML into two views. One on Screen 1 and the other on Screen 2.
Screen 1 has a simple view ( e.g a cinema screen for customers to view ) and Screen 2 has all the controls ( e.g visible to the person on the other end ).
Any possible solution?
Best solution would be to have 2 different pages, after all it's a
system and not a page.
But, since you want a workaround, use Bootstrap (it's
responsive, so should easily adapt to a 2 screen display).
add Bootstrap to HTML <head>:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
to HTML <body>:
<div class="wrapper-fluid">
<div class="container-fluid">
<div class="row">
<div id="screen1" class="col-md-6">
<!-- PAGE 1 HERE -->
</div>
<div id="screen2" class="col-md-6">
<!-- PAGE 2 HERE -->
</div>
</div>
</div>
</div>
and to CSS:
#screen1 {
background-color: blue;
height: 900px;
}
#screen2 {
background-color: green;
height: 900px;
}
It's old school, but I did just recently did something like this using the "target" attribute inside the anchor tag. Open two browser windows, set the "display" one to full screen and the links on the first screen (the control screen) target the second browser window. For example:
<a target='songs' href='/freebird.html'>Freebird</a>
No programming needed.
I want to use JavaScript to comment out a text within a div.
For example, I got <div> This is a text</div>. I want to use code so that unless this is visible, then it's commented out.
<!-- -->
I got 3 tabs, which I can click to see a different text, image, video within the div.
Here is a JSFiddle of what it looks like.
I tried changing the text and that's not so hard but I can't make a code that works the way I want. I want the hidden divs content to be commented out so as not to lag the site, but when I click on a hidden div I want the commented out part to be uncommented out.
This is the script used to switch and hide divs.
$('.Options div').click(function() {
var i = $(this).index();
$('.Frames').hide();
$('#Action' + (i + 1)).show();
});
This is the HTML code:
<div class="Options">
<div class="OptionsTab">OptionRed</div>
<div class="OptionsTab">OptionGreen</div>
<div class="OptionsTab">OptionBlue</div>
</div>
<div class="Holder">
<div class="Frames" id="Action1" style="display: block;">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action2">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
<div class="Frames" id="Action3">
<div style="font-size: 25px; color: white;"> This is a contained object</div>
</div>
</div>
commenting out with javascript will not save you memory or loading time, as the sources have already been loaded from server
instead of hiding nodes with hide() (display:none) you can remove the nodes at client side by
$('.Frames').remove();
1) Use a some data- attribute for saving current inner html of element in dataset
2) Clear the current inner html of element with $('your_selector').html(" ");
3) Return inner html from data- attribute into element
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset