We Keep Coding

how to set a div made of 3 buttons that in the moment in which the broswer's window is shrunk turns into a pop-up menu

I'm writing this message as I'd need to know how to set a div made of 3 buttons that, in the moment in which the broswer's window is shrunk and it's no longer on full screen, turns into a pop-up menu visible through the conventional three lines.

You can define #media in your css.
An example has been set here:
https://jsfiddle.net/jfgm9r2v/8/
The html code is like this:
<div class="hideOnSmall">
<button>Text1</button>
<button>Text2</button>
<button>Text3</button>
</div>
<div class="displayOnSmall">
<div class="hamburger-box">
<button>MyHambuger</button>
</div>
The magic happens in the css:
.hideOnSmall {
display: block;
}
.displayOnSmall {
display: none;
}
#media only screen and (max-width: 768px) {
.displayOnSmall {
display: block;
}
.hideOnSmall {
display: none;
}
}

Change text of <h1> if screen is reduced

I have a code trying to change the text of an h1 if the screen is reduced in size, here's the actual code I have, but is not working. Someone could help me to correct it and to understand it? thanks!
HTML
<h1 id="text1">Test</h1>
JAVASCRIPT
if($(window).width() <= 500){
$('#text1').Text('testing');
}else{
$('#text1').Text('buuu');
}

You need to work along with window resize event. Other option is using CSS pseudo code.
#media (min-width: 500px) {
#text1:after {
content: "foo";
}
}
#media (max-width: 499px) {
#text1:after {
content: "bar";
}
}
<h1 id="text1"></h1>
Edited As per Niet the Dark Absol suggestion.
#media (min-width: 500px) {
#text1 > .tiny {
display: none;
}
}
#media (max-width: 499px) {
#text1 > .big {
display: none;
}
}
<h1 id="text1">
<span class="big">Bigger Content</span>
<span class="tiny">Smaller Content</span>
</h1>

Maybe CSS could help you here:
use data- attributes to validate HTML5 and mediaqueries to show its value. Old text-indent method to erase at screen text hold in the tag itself.
You can use it without id or class for entire site, but data- attribute will need to be there and filled, else a class to set wherever needed, or id for a single use.
#media all and (max-width:500px) {
h1 {
text-indent:-9999px;
}
h1:before {
content:attr(data-text);
text-indent:0;
float:left;
}
}
<h1 data-text="short text">My long text stands here</h1>

You have to catch the window's resizing events. Pretty easy to do it with jquery.
Try this:
$(window).resize(function(){
if ($(window).width() <= 500){
$('#text1').Text('testing');
}
else {
$('#text1').Text('buuu');
}
});
http://jsbin.com/puzanajepe/1/edit?html,js,output

Responsive Design and onclick events

I have a mobile menu button (only viewable with display:block by using media queries). When the button is clicked, my main "mobile" menu appears - I do this using simple javascript code (see below).
The problem ... if I click the button to expand the menu (changing the inline style from display:none to display:block), and then increase the browser size ... my menu doesn't disappear anymore. So, the inline style doesn't recognize the media query...
Below is the script that expands my menu...
<!-- Menu Expander / Toggle Visibility -->
<script type="text/javascript">
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.style.display == 'block') e.style.display = 'none';
else e.style.display = 'block';
}
</script>
Here are some of the styles.... you'll see the menu-mobile (which is the actual menu) and the mobile-menu-but (which is the button) is hidden (with display:none). When the browser window is reduce, the button appears (with display:block in the media query), but the menu is still hidden. Then when you click the javascript button, the inline style display:block is added to set for the mobile-menu.
#mobile-menu-but, #menu-mobile { display:none; }
#menu a, #menu a:link { padding: 15px 16px 12px 16px; }
#media (max-width: 790px) {
/* Switch to Mobile Menu when too long */
#menu { display:none; } /* Hide Main Menu */
#mobile-menu-but { display:block; float:right; margin:0 20px 0 0; height:50px; padding:5px 0; }
#mobile-menu-but a { float:right; }
.menu-txt { margin:10px 10px 0 0; float:right; }
#menu-mobile { width:100%; background-color:#000; text-transform:uppercase;
font-size:16px; font-family:"AvantGarde", "Helvetica Neue", Arial, Helvetica, sans-serif; } }

Instead of directly manipulating element styles, you can add and remove class values in order to change element appearance. The rules for the class(es) can be affected by media queries because they'll go right into the stylesheet.
Modern browsers provide the .classList API:
function toggle_menu(id) {
var e = document.getElementById(id);
if (e.classList.contains("showing"))
e.classList.remove("showing");
else
e.classList.add("showing");
}
Now, in your CSS, you can have:
#menu { display: none; }
#menu.showing { display: block; }
If you only want to show the menu when the screen is big, add this after those lines above:
#media screen and (max-width: 700px) { /* or whatever size you want */
#menu.showing { display: none; }
}
(There are other strategies for arranging rules in media queries, depending on what you're trying to do.

Rather than add and remove the inline style with e.style.display , use
var e = document.getElementById("someID");
e.className = "someClass";
The problem you have is your inline style is overriding your CSS. Inline style will always have this priority (unless !important I guess - not sure about that).

Here's a trick you can use to avoid JavaScript altogether:
#menu {display:none}
#secret_checkbox {position: absolute; left:-9999px}
#secret_checkbox:checked + #menu {display: block}
<label for="secret_checkbox">Click to open/close menu</label>
<input type="checkbox" id="secret_checkbox" />
<div id="menu">Hello!</div>
The label can be anywhere, the important thing is for the "hidden" checkbox to be immediately before the element it affects. This can make it a lot easier to change how things behave in CSS, plus it has the added benefit of working even if the user has JavaScript disabled ;)

How to display a nav ul list as a select

I'm busy working on a responsive mobile first site and one of the requirements is to display the main navigation (nav>ul>li) like it would be a tag for the mobile view. I've in the past used either javascript to display it on click or just kept it inline depending on the client, but haven't had this requirement before, so I'm wondering if there is a way with CSS to have the <li> display like it would if it were a <select> tag. For desktop view it will just display normally inline.

You need to have separate elements for nav and select like below.
<select id="mobileNav">
<option>your links</option>
</select>
and your original nav
<nav>
<ul>
<li>links</li>
</ul>
</nav>
Now in your CSS use media queries to toggle based on screen width:
#media (max-width: 480px) {
nav {
display: none;
}
select#mobileNav {
display: block;
}
}
#media (min-width: 481px) {
select#mobileNav {
display: none;
}
nav {
display: block;
}
}

Detecting page size and making css changes when width drops below 500px

I am developing a site and I want to make a script that will detect when the page is more than 500px and when it is below so I can make changes to the code. My current code has some links at the end of the page, like a footer, and when it is below 500px I want them to come close to each other for example;
<div class="footer-titles">
<ul class="footer-titles-ul">
<li><h class="titles">Link 1</h></li>
<li><h class="titles">Link 2</h></li>
<li><h class="titles">Link 3</h></li>
</ul>
</div>
And my css
.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}
So when the page is below 500px I want the padding-right from the .footer-titles-ul li to be 30px but, if the page gets back to over 500px to revert back to normal.

You don't need JavaScript for this and you shouldn't use JavaScript for this. You want CSS3 Media Queries (Unless you need old browser support that's not possible with a polyfill).
You would want something like this to get the change:
#media screen and (max-width: 500px) {
/* UNDER 500px CSS here */
.class{
color: red;
}
}

Using media queries is the way to go. Just add this to the bottom of your CSS file:
#media only screen and (max-width: 500px) {
.footer-titles-ul {padding-right: 30px;}
}

If you want jQuery, I think this would work for you. But then again, I would recommend CSS media queries as the others say.
$(document).ready(function(){
var detectViewPort = function() {
var Wwidth = $(window).width();
if (Wwidth < 500){
$('.footer-titles-ul li').css('padding-right', '30px');
}
if (Wwidth > 500){
$('.footer-titles-ul li').css('padding-right', '90px');
}
};
$(function(){
detectViewPort();
});
$(window).resize(function () {
detectViewPort();
});
});