We Keep Coding

Change display property and id attribute

I have 2 sections:
<section class="notes animate" id="need" style="background:#fff; height:900px; padding-top:70px;">
<!--stuff --->
</section>
<section class="focus" id="need" style="display:none;">
<!--stuff --->
</section>
I want to display the second section when window is lowered to width less than 1043px. And hide the first section by display:none
Update:
How can I remove id attribute of first section, when width is less than 1043?

You should use CSS media queries. You can read more about it here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
For example:
#media only screen and (max-width: 1043px) {
section.focus {
display: block;
}
}

Firstly you cannot use same ID for more than one div. So change the id of one div.
And to hide the second div and show the first div:
Use CSS:
#media only screen and (max-width: 1043px) {
.focus {
display: block;
}
.notes {
display: none;
}
}

In response to your requirement for removing the ID attribute, try the following JavaScript. It can only do it once however, and if you are interested in performance you should consider investigating debounce/throttle for the resize handler. (http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/)
$(window).on('resize', function() {
if($(window).width() < 1043) {
$('.notes').removeAttr('id');
$(window).off('resize');
}
});
However, the media queries answers are the correct approach to show/hide based on screen width.

css style loading + id. eg loading1, loading300

I have this in css:
#loading{
display:none;
}
the problem is, i need to display none this loading div, that come with an id after loading name.
eg:
<div id=loading1></div>
<div id=loading422></div>
<div id=loading9232></div>
I want to apply loading style in all this divs, can i do that? how would it be?
thank you!

I want to apply loading style in all this divs, can i do that?
Yes, with an attribute starts with selector:
[id^=loading] {
display: none;
}
That matches any element whose id attribute starts with loading.
Example:
[id^=loading] {
color: blue;
}
<div id="loading1">loading1</div>
<div id="loading12">loading12</div>
<div id="loading123">loading123</div>
<div id="notloading">notloading, so not affected</div>
<div id="loading">loading with nothing after</div>

hello freind you can put an class attribut and name it loading
like this
<div id=loading1 class="loading"></div>
<div id=loading422 class="loading"></div>
<div id=loading9232 class="loading"></div>
and call it in your css like this
.loading{
display:none;
}
that's can be better than id class is good
i hope to find that is helpfull

Try this:
div[id^=loading]{display:none;}
Refer this link for more details
Examples:
/* All spans with a "lang" attribute are bold */
span[lang] {
font-weight:bold;
}
/* All spans in Portuguese are green */
span[lang="pt"] {
color:green;
}
/* All spans in US English are blue */
span[lang~="en-us"] {
color: blue;
}
/* Any span in Chinese is red, matches simplified (zh-CN) or traditional (zh-TW) */
span[lang|="zh"] {
color: red;
}
/* All internal links have a gold background */
a[href^="#"] {
background-color:gold
}
/* All links to urls ending in ".cn" are red */
a[href$=".cn"] {
color: red;
}
/* All links to with "example" in the url have a grey background */
a[href*="example"] {
background-color: #CCCCCC;
}

Javascript override of media query

I'm creating a responsive site. I have a media query set up so that when the screen width drops below 768 px a class (lets call it "hiddenClass") is hidden. Then I implement Javascript to toggle this class into view on a button click. The problem I'm running into is that javascript seems to override the media query. So if I shrink the screen below 768px the "hiddenClass" disappears....then I click the button which displays the "hiddenClass".....then click the button once more to hide it on the smaller device again.....now I expand the window and the "hiddenClass" stays hidden even after it gets to the 768px. If I take out the javascript and shrink the window the "hiddenClass" performs like it should...which tells me javascript is overriding it.
Is there a CSS fix to this? I know I could always check for a window resize event in javascript to display the hiddenClass after it reaches 768px. Was just wondering if this can be handled with CSS....or if javascript is the way to fix it.
Update JSfiddle with JS commented out so you can see how it should work...then add in the JS to see the issue described above. The button is the 'menu' navigation element when you shrink the screen down and "hiddenClass" would be the "menu" class in the li's:
http://jsfiddle.net/or5vy17L/1/
HTML:
<ul>
<li class="menuButton">- Menu -</li>
<a href="index.html">
<li class="menu" >
Home
</li>
</a>
<a href="instagram.html">
<li class="menu" >
Instagram
</li>
</a>
<li class="menu">Clients</li>
<li class="menu">Nutrition</li>
<li class="menu">About Me</li>
<li class="menu">Contact</li>
</ul>
css:
li {
display:inline;
color:$font-color--nav;
cursor:pointer;
font-size:1.5em;
padding: .7em .7em .7em .7em;
//for space between margins
margin-right:-4px;
border-radius:.5em;
}
ul {
text-align:center;
}
.menuButton {
display:none;
}
#media (max-width:768px) {
ul {
padding:0px;
}
li {
display:list-item;
border:1px solid white;
padding:.2em .2em .2em .2em;
border-radius:0px;
}
.menu {
display:none;
}
.menuButton {
display:list-item;
}
}
javascript:
/****
$('ul').on('click', '.menuButton', function() {
$('.menu').slideToggle();
});
****/

The .hiddenclass is staying hidden because it is a inline style, and inline styles override nearly all other styles. You have two options, one is to override the inline style with a CSS, as described in this CSS Tricks post:
<div style="background: red;">
The inline styles for this div should make it red.
</div>
div[style] {
background: yellow !important;
}
JSFiddle Demo
According to this article, this CSS solution works in:
Internet Explorer 8.0
Mozilla Firefox 2 and 3
Opera 9
Apple Safari, and
Google Chrome
Or, use JS or JQuery to remove the inline style when the screen is resized:
$(window).resize(function(){
if($(this).width() >= 768){
$('.hiddenclass').show();
}
else{
$('.hiddenclass').hide();
}
});
JSFiddle Demo

I seem to have come across this issue myself and following the advice here, I've come up with this solution:
window.onresize = function() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
if(window.innerWidth >= 1024) menu.style.display = '';
};
function toggleMenu() {
var menu = document.getElementById('nav').getElementsByTagName('ul')[0];
var link = document.getElementById('nav').getElementsByTagName('a')[0];
if(menu.style.display == 'block') {
menu.style.display = 'none';
link.innerHTML = '▼';
}else{
menu.style.display = 'block';
link.innerHTML = '▲';
}
}
Explanation:
The toggleMenu() function controls the display/hiding of the menu, and the issue presented itself after resizing the window from < 1024px (drop-down style menu) to > 1024px, my normal "desktop" menu disappeared completely. Given that JavaScript inserts styles inline (i.e. as a element attribute, ) then on a resize of 1024 or higher, this inline style should be gone.
Problem fixed.

javascript setting width dimensions changes element location

I'm trying to adjust the width of a div that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above contentSectionLeftSide.
Here's what I've got:
function setButtonH(e){
var item = e;
var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
if(e==items[1])
{
document.getElementById("contentSectionLeftSide").style.width="600px";
document.getElementById("contentSectionRightSide").style.width="300px";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
else {
document.getElementById("contentSectionLeftSide").style.width="45%";
document.getElementById("contentSectionRightSide").style.width="45%";
document.getElementById("contentSectionLeftSide").style.height="500px";
document.getElementById("contentSectionRightSide").style.height="500px";
}
}
HTML
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">
Home
</div>
<div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">
Interests
</div>
<div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">
Creations
</div>
<div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">
Bio
</div>
</nav>
#contentSectionLeftSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}
#contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
}

I think I have a handle on the situation now, and recreating your code locally I did notice a small gap above the left content section.
The problem is that because your divs' content are (probably) resulting in different div heights, the display: inline-block CSS declaration is causing them to be vertically aligned to each other at the bottom baseline, so all you need to do is tell the CSS to align them vertically to the top.
I constructed the left- and right-hand side content areas like this, below the HTML you provided:
<nav id="menu_item">
<div id="menu_item1" onclick="setButtonH('menu_item1')">Home</div>
<div id="menu_item2" onclick="setButtonH('menu_item2')">Interests</div>
<div id="menu_item3" onclick="setButtonH('menu_item3')">Creations</div>
<div id="menu_item4" onclick="setButtonH('menu_item4')">Bio</div>
</nav>
<div id="contentSectionLeftSide">Left side content!</div>
<div id="contentSectionRightSide">
Right side content!<br />
There's a little more content in here!
</div>
I also removed the menuGo(#) function from the onClick's, as I didn't know where that functionality went. Side note: be careful here, as in your code above it reads (for example):
onclick="setButtonH('menu_item2'), menuGo(2)"
Where it should be:
onclick="setButtonH('menu_item2'); menuGo(2)"
Which could yield problems down the line.
However, back to the solution, all you need to do is add the line vertical-align: top; to each of your content areas' style declarations, and they'll be aligned to the top, effectively:
#contentSectionLeftSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
#contentSectionRightSide {
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;
display:inline-block;
vertical-align: top; /* extra CSS... */
}
Here's a working fiddle for you to see it in action. Hope this helps, good luck and keep coding! :)

Text Rollover Effect without Images

I have a phone number link at the top of my website, the number is 1300 GO POOPIES. (for example purposes :P)
<h1 class="phone-text">
1300 GO POOPIES
</h1>
So basically, when a person puts their mouse over the 1300 GO POOPIES it changes to 1300 46 7667437.
I don't want to use an image however as I want to preserve the click-to-call functionality.
I tried to do something with CSS, with minimal success however.
.phone-text::after {
content: "1300 GO POOPIES";
}
.phone-text:hover:after {
content: "1300 76 67437";
}
not sure if this is out of the boundaries of css, and needs java...

You don't even need to load jQuery or JS.
CSS+HTML only.
FIDDLE

If there is a reason for you avoiding JavaScript, then this can be achieved with just CSS if you're willing to add some extra markup. You do so by putting two elements inside the <a> tag, one with the numeric number, one with the alphanumeric number. Then you can hide/show them independently with a:hover selectors.
HTML
<h1 class="phone-text">
<a href="tel:+6113007667437">
<span class="letters">1300 GO POOPIES</span>
<span class="digits">1300 76 67437</span>
</a>
</h1>​
CSS
.phone-text a .digits,
.phone-text a:hover .letters {
display: none;
}
.phone-text a .letters,
.phone-text a:hover .digits {
display: inline;
}
jsFiddle

You want something a little more in depth... Here goes.
Html
<a href="tel:+6113007667437">
<div id="hide">
<h1>1300 76 67437</h1>
</div>
<div>
<h1>1300 GO POOPIES</h1>
</div>
</a>
And your css
div{
position:absolute;
background:#ffffff;
}
div#hide:hover{
display:none;
}

How about this http://jsfiddle.net/tzerb/S52bz/
< a class="phone-text" href="tel:+6113007667437" >< /a >

here you have a variation to the solution proposed by yaponyal. it works without the > sign.
.hiden {
display:none;
}
a:hover .shown {
display:none;
}
a:hover .hiden {
display:inline;
}
​

Try this:
$('a').hover(
function(){
$(this).text('1300 76 67437')
},
function(){
$(this).text('1300 GO POOPIES')
}
});