How do I make the color of a section change in a HTML menu made of DIVs when that section is selected?
Basically, I am creating a menu such as the one on the left of this image:
http://docs.shopify.com/assets/images/manual/orders/orders.jpg?1386029140
How do I make the corresponding section we are on to be "illuminated"?
Do I do it with PHP and having a variable for each div's class?
This probably wouldn't be done with PHP, as PHP is server side, JavaScript is more what your looking for as it runs on the clients machine and can be used to respond to clients actions such as mouse clicks.
You can do this with some CSS and Jquery.
First include your Jquery library in your HTML, place this <script src="jquery-1.10.2.min.js"></script> in the <head> tags
Then you can use
$( "#target" ).click(function() {
$(this).css.backgroundColor = "red";
});
Where #target is the name of the DIV Id or Class you want to select.
Related
I am trying to take the div #content of server list from here (same domain): http://bans.endlessgamers.com/index.php?p=servers
And embed it on a new page (same domain): http://www.endlessgamers.com/server-list/
The issue: I have managed to embed it fine with <iframe>, but the server list is responsive and expands/collapses when clicked. When I expand, I have to scroll in the <iframe> window to see the content. Is there a way to force my page to expand and collapse with the information in the <iframe> div?
Note: To replicate my issue click on hostname of server to expand or collapse it.
<head>
<script>
$("iframe").contents().find("#content").width()
</script>
</head>
<body>
<iframe src="http://bans.endlessgamers.com/index.php?p=servers#content"></iframe>
</body>
You can try set iframe height dynamic:
//Initially set iframe height on load
$($("#elCmsPageWrap iframe")[0]).css("height",+$("#elCmsPageWrap iframe")[0].offsetParent.clientHeight);
//Set iframe height again when collapse/expand in table
$(".listtable tbody tr td").click(function(){
$($("#elCmsPageWrap iframe")[0]).css("height",+$("#elCmsPageWrap iframe")[0].offsetParent.clientHeight);
});
Why don't you copy the code of the original #content div into a new file? Let's say: server-list.php
Then, you include this file on both pages:
<?php include 'server-list.php'; ?>
The include function basically pastes the code into the file.
iFrames are mostly used to embed external pages.
The reason I need to do this is that the website I'm working on uses the exact same template to display dynamic content for multiple pages. All pages replicate the exact same div id's because they display the content the same way (except for the header content!). The header content shortens however the div id's still remain within the source code.
The blog index page needs to display 1 background image while every other page on the website displays another background image.
Thanks in advance for any help.
This snippet of code will do what you want:
if (window.location.href.indexOf('somepart_of_the_url') != -1) {
//Change background to some div
$('#somediv').css('backgroundImage','url(images/mybackgroundimage.jpg)');
//Change background to page body
$("document.body").css('backgroundImage','url(images/mybackgroundimage.jpg)');
}
I often give the body class a name based on the template or request path. I know you said that they all use the same template, but that template takes params and one of the params should be
body_class
And whatever controller/dynamic thing you have populating your site and rendering the template, should pass in 'home' when you're at /. In my previous experience, I would pass in other things as well so that /blog/category/post might have a body class like
<body class="post two-column-a">
Then your selectors are something like:
body { ... }
body.home { ... }
This works:
<script language="javascript">
$(document).ready(function() {
if (window.location.href.indexOf('INDEX_URL') != -1) {
//Change background
$('#DIV_ID').css({'background-image': 'url(http://URL.com/images/BG.jpg)', 'background-repeat': 'repeat-x', 'background-position': 'center top', 'width': '100%!important', 'min-height': '400px'});
}
});
</script>
The flaw that this code has though is that if you insert a directory into "INDEX_URL" such as /folder/, any page after /folder/ will have that background.
I want to store html that isn't to be rendered until needed either within a tag that can hold raw html code without rendering it on page load or store it within a php or jquery variable for later use. I then want to be able to insert the html into the DOM on button click and have it render.
I've tried storing it within an xmp tag as that can store html code with the < and > characters without using character codes for them, but when trying to insert it into the DOM, the updated source shows it had been copied but it wouldn't render on screen. Also tried storing it within a code tag, which worked on a desktop browser but not in mobile safari. Since this is a webapp mobile browser compatibility is important.
Anyone know of a good method of doing this?
Try <script> tags with a type of text/plain or text/html:
<script type="text/plain" id="example">
<div class="example">
<h2>Hello</h2>
<p>World</p>
</div>
</script>
$(".button").click(function () {
var html = $("#example").text();
$("#destination").html(html);
});
It depends on where do you want to generate the content in question. If it's easier for you setup to generate it on the server side, you can use css to hide those parts (like display:none) and just remove the css property or grab the nodes with javascript and put them elsewhere with something like this:
$('.target').html($('.hidden_node').html());
If you want to generate the content on the js side, you can build it as a long string and just shove it into the target, or you can use jquery's node generation syntax like:
$('<div />').attr({
class: 'test'
}).appendTo("body");
Or you can use one of the various javascript templating solutions like mustache or handlebars.
I'm currently working on my own Wordpress theme. I thought it'd be cool to have a dropdown box in the sidebar in which you can choose different themes, and it'll change the page background, border colors, etc a bit.
The thing is, for one theme (the default one) I have Javascript in my header.php file where the header image will change each refresh. I want this header image to go away when switching stylesheets, but it just overlaps the other one. How do I change this?
If you want to see for yourself, the box is in the right sidebar under the blue buttons. This is my testing website. Ignore the 000webhost stuff.
http://trainman1405.site11.com/wordpress/
Thank you!
The general solution here is to define all of your styles in one sheet, but namespace them so you can simply change the class on the body and the new styles will take effect. (You could also define them in separate sheets, using the namespaces, and simply reference every sheet in your <head>.)
For example, some CSS:
body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }
And then when you want to change it (using jQuery, although plain Javascript could do this job too):
$('#theme_select').change(function()
{
$('body').removeClass('green').removeClass('red'); // remove existing classes
$('body').addClass($(this).val());
});
it looks like you could use a javascript library its called jquery. You could use that to hide and display a new image e.g
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");
}
</script>
and then you have to set up a button or something to trigger this effect
so...
<button onclick="piczotheme()"> click </button>
JS newbie here
I want to have a kind of profile preview page where people can select a color (could be clicking on an image or could be a radio button) and that changes the background colors in certain divs in the preview page.
IE someone clicks on the button for red then the gradients in the background of the title bar, info boxes etc will turn to reds.
Whats the best way to do this?
I think you'd be best off if you define specific stylesheets for each 'color' (read: style) you want to be available to the user. If the user clicks on something to make his color choice, you can change the stylesheet that is loaded. You probably will need a default.css or a main.css file that contains all positioning and default coloring stuff and for each color you have a separate css file like red.css that will load the colors for each element in your dom you want to be changed.
In simple Javascript this could look something like:
<link rel="stylesheet" href="style1.css" id="stylesheet">
<script type="text/javascript">
function changeStyle() {
document.getElementById('stylesheet').href = 'style2.css';
}
</script>
Of course, you can also include a library like jQuery to do this for you. Another option (non JS) is to do a POST when the user picks a color and change the stylesheet server side. But that will make the page refresh.
Use jQuery:
$(document).ready(function(){
$('#my-button').click(function(){
$('.title-bar').css({'background' : 'red'});
});
});
Edit:
I just hacked together a better (as in "programmatic") solution: http://jsfiddle.net/eNLs6/
$(document).ready(function(){
$('.colorchanger').click(function(){
$('#preview-div').css({'background' : $(this).val()});
});
});
I think the best way to achieve that is to have different div classes for each color (theme in general) and change the css class of the div when button or image clicked :
$('#myRedButton').click(function(){$('#myDiv').attr('class','red')});
$('#myBlueButton').click(function(){$('#myDiv').attr('class','blue')});
And you will have a html looking like
<div id="myDiv">....the div that will have it's color changed </div>
<img src="..." id="myRedButton"/>
<img src="..." id="myBlueButton"/>
Create a base stylesheet (base.css) for general stuff and then secondary ones for each colour, eg red.css, blue.css
When a users clicks the red image, it loads the red.css stylesheet.
$('#red').click(function() {
//load red.css
}
See this question on how to change a secondary stylesheet with jQuery for more details.
I would add a class to the body and then use that in the stylesheet to create different themes.
JS:
$('#red').click(function() {
document.body.className = 'red';
});
CSS:
body.red .title{background:url('red-gradient.png');}
body.red .color{color: red}
/* etc... */
You can of course put each theme in a separate CSS file, to make things easier to organize. But for performance reasons, I suggest you load all CSS at once and just swap classes onclick, instead of a dynamic stylesheet loader .