We Keep Coding

CSS fixed menu title and buttons overlapping - mobile view

I'm having trouble with a button overlapping my header title in the mobile view (looks fine in computer view). I'm trying to find a way for the button and the header title to both fit in the header, possibly by resizing according to changing width? if that's possible.
Here is the CSS for my header:
header: {
background: '#C4C4C4',
height: '100px',
textAlign: 'center',
boxShadow: '0px 2px 2px #A9A9A9',
fontFamily: 'PT Sans Caption',
fontSize: '36px',
marginBottom: '20px',
paddingTop: '20px',
textTransform: 'uppercase',
position: 'fixed',
top: 0,
width: '100%',
},
homeButton: {
boxShadow: '0px 2px 2px #A9A9A9',
fontFamily: 'PT Sans Caption',
fontSize: '20px',
display: 'block',
position: 'absolute',
marginLeft: '10px',
},
Here is a screenshot of computer view:
Here is a screenshot of mobile view:
Basically I want the 'Add Movement' title to not be hidden by the home button. Any help would be appreciated!

You could try using Flexbox and a media query
header {
display: flex;
#media (max-width: [whatever you choose]px) {
flex-wrap: wrap;
}
}

jQuery toggle works after an animation but not before it

there Stack Overflow community. I'm sure there's just something simple that I am missing but for the life of me I cannot figure out what it is.
I have a simple animation that is just transposing some divs. The animation runs and everything but I am getting some weird behaviour that I am not sure exactly why it is.
In my jQuery, there is a method show_dots(integer milliseconds). The only thing this function does is to call $.toggle() on the 4 elements that I am animating. I would like the function to behave like this. The page is loaded, the 4 elements are not visible. They become visible and then the animation runs.
When I include a method call to show_dots before the animation, the dots do not appear and the animation runs(I opened up the dev tools of the browser and I can see the values changing). Just for the hell of it, I threw in a method call to show dots AFTER the animation.
In that case, the behaviour was... the page loaded (the dots were visible), the animation ran, and then the dots disappeared after the method call. I'm not certain why this is the behaviour.
I've also tried animating the capacity to no avail. I'm not sure why it isn't working but I'm not sure where to start. I'm sure it's just some inherent feature that I'm unaware of, but thus far, I'm not sure what it is
Code is as follows:
let tl = $("#square-animation-div-tl");
let tr = $("#square-animation-div-tr");
let bl = $("#square-animation-div-bl");
let br = $("#square-animation-div-br");
$(window).on('load', function() {
animation_loop(1300, tl, tr, bl, br);
$("#journey-link").on("click", pause_animation);
});
function show_dots(dur) {
tl.toggle(250);
tr.toggle(250);
bl.toggle(250);
br.toggle(250);
};
function animation_loop(dur, tl, tr, bl, br) {
//toggle_dots(250) //this line does not make the dots toggle in or out
tl.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
left: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
top: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
tr.animate({
top: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
top: -12,
borderRadius: "50%"
}, dur)
.animate({
right: -12,
borderRadius: "0%"
}, dur);
bl.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "50%"
}, dur)
.animate({
left: ($("#journey-link").width() - 18),
borderRadius: "0%"
}, dur)
.animate({
bottom: -12,
borderRadius: "50%"
}, dur)
.animate({
left: -12,
borderRadius: "0%"
}, dur);
br.animate({
right: ($("#journey-link").width() - 18),
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: ($("#journey-link").height() - 18),
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur)
.animate({
right: -12,
borderRadius: "50%",
backgroundColor: "#ffffff"
}, dur)
.animate({
bottom: -12,
borderRadius: "0%",
backgroundColor: "#0000ff"
}, dur);
toggle_dots(250);
//animation_loop(dur,tl,tr,bl,br);
};
.square-animation-container {
width: 100%;
height: 100%;
z-index: 3;
}
.square-animation-div {
height: 24px;
max-height: 24px;
min-height: 24px;
width: 24px;
max-width: 24px;
min-width: 24px;
z-index: 2;
position: absolute;
}
#square-animation-div-tl {
top: -12px;
left: -12px;
background-color: blue;
}
#square-animation-div-tr {
top: -12px;
right: -12px;
background-color: white;
}
#square-animation-div-bl {
bottom: -12px;
left: -12px;
background-color: white;
}
#square-animation-div-br {
bottom: -12px;
right: -12px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square-animation-container">
<div id="square-animation-div-tl" class="square-animation-div">
</div>
<div id="square-animation-div-tr" class="square-animation-div">
</div>
<div id="square-animation-div-bl" class="square-animation-div ">
</div>
<div id="square-animation-div-br" class="square-animation-div ">
</div>
</div>

Trouble centering items within parents in React

I’m having trouble aligning two components within another div in React. I’m using relative positioning for the parent div (snippetButtonHolder) and absolute positioning for its children (snippet and button). I want snippet to be centered in the parent and button to be under snippet and to the right, but for some reason when I use these attributes they are positioned relative to the entire page, not to the parent div. Does anyone have a suggestion as to what I should do differently?
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
margin: '0 auto',
padding: '10px',
width: '100%',
position: 'absolute',
left: '50%',
},
snippetButtonHolder: {
width: '95%',
position: 'relative',
},
button: {
float: 'right',
marginTop: '5px',
position: 'absolute',
left: '94%',
},
};
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div style={styles.module}>
<div style={styles.snippetButtonHolder}>
<div style={styles.snippet}>
<div
{'text will go here'}
</div>
{this.state.showButton ?
<button
style={styles.button}>
Press me
</button>
: null}
</div>
</div>
</div>
);
}
}

Give this a try:
const styles = {
module: {
marginTop: '30px',
padding: '20px',
},
snippet: {
backgroundColor: '#f2f2f2',
border: 'solid 1px #ccc',
borderRadius: '4px',
display: 'inline-block',
overflow: 'hidden',
padding: '10px',
},
snippetButtonHolder: {
textAlign: 'center',
width: '95%',
},
button: {
float: 'right',
marginTop: '5px',
},
};

Header with horizontal lines in React.js

I am trying to create custom header in React.js. I have a working prototype in this JSFiddle.
The problem is, React does not go well with css pseudo-elements, so following this advice I tried to "translate" it into React component:
var lineAfterStyle = {
position: 'absolute',
top: '51%',
overflow: 'hidden',
width: '50%',
height: '1px',
content: '\a0',
backgroundColor: 'red'
};
var lineBeforeStyle = {
position: 'absolute',
top: '51%',
overflow: 'hidden',
width: '50%',
height: '1px',
content: '\a0',
backgroundColor: 'red',
marginLeft: '-50%',
textAlign: 'right',
};
......
<div>
<div style={lineBeforeStyle} />
<h1 style={headerStyle}>Hello World!</h1>
<div style={lineAfterStyle} />
</div>
This does not work as expected--horizontal lines are placed somewhere on the screen and they are NOT inlined with the header. Is there any way to make it better?

Jquery - problem writing a function for common tasks

I have the following code for a menu system which includes a lot of parts which are common in every menu item.
I'm struggling to put the common code into functions which I can then call as needed - so I don't need to have hundreds of lines of identical code.
Can anyone help point me in the right direction?
$("#test1").hover( function() {
$(this).animate({
width: "599px",
left: "0px",
height: "168px",
backgroundColor: "#d7df23",
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
// Start of common code
$(this).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
// End of common code
$(this).find("h2").animate({
left: "600px"
}, 100).hide();
$(this).find(".moredetail").delay(150).animate({
left: "0px"
}, {
duration: 150,
easing: 'easeInBounce'
});
}, function() {
$(this).clearQueue().animate({
width: "246px",
left: "9px",
height: "83px",
backgroundColor: "#222",
opacity: 0.90
}, 100).css({'z-index': "1", 'border-top': '1px solid #444'});
// Start of common code
$(this).find(".thumb").animate({
width: "68px",
height: "68px",
marginTop: "6px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "13px"
}, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
// End of common code
$(this).find("h2").show().animate({
left: "0px"
}, {
duration: 350,
easing: 'easeOutBounce'
});
$(this).find(".moredetail").animate({
left: "600px"
}, 100);
});

Factor each reused piece of code in a function. You'll have two functions like this one:
function thumbHoverStart(element) {
$(element).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100)
.attr('src','images/home/animatedMenu/1IMG.jpg')
.css({'border': '1px solid #FFF'});
}
Call each function from the appropriate event:
// ...
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
thumbHoverStart(this);
$(this).find("h2").animate({
left: "600px"
// ...

If the image number is based off the id just use that when setting the src:
.attr('src','images/home/animatedMenu/' + this.id.replace('test','') + 'IMG.jpg')
Then you can have one set of code based on a class selector, $(".hoverable").hover(...

Just initialize the function below which will be containing the common code -
Try below code -
$(document).ready(function(){
$("#test1").hover( function() {
$(this).animate({
width: "599px",
left: "0px",
height: "168px",
backgroundColor: "#d7df23",
opacity: 0.95
}, 100).css({'z-index': "10", 'border-top': 'none'});
// call common code function
common1(this);
$(this).find("h2").animate({
left: "600px"
}, 100).hide();
$(this).find(".moredetail").delay(150).animate({
left: "0px"
}, {
duration: 150,
easing: 'easeInBounce'
});
}, function() {
$(this).clearQueue().animate({
width: "246px",
left: "9px",
height: "83px",
backgroundColor: "#222",
opacity: 0.90
}, 100).css({'z-index': "1", 'border-top': '1px solid #444'});
// call common function 2.
common2(this)
$(this).find("h2").show().animate({
left: "0px"
}, {
duration: 350,
easing: 'easeOutBounce'
});
$(this).find(".moredetail").animate({
left: "600px"
}, 100);
});
});
function common1(obj){
$(obj).find(".thumb").animate({
width: "150px",
height: "150px",
marginTop: "8px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "12px"
}, 100).attr('src','images/home/animatedMenu/1IMG.jpg').css({'border': '1px solid #FFF'});
}
function common2(obj){
$(obj).find(".thumb").animate({
width: "68px",
height: "68px",
marginTop: "6px",
marginRight: "0px",
marginBottom: "0px",
marginLeft: "13px"
}, 100).attr('src','images/home/animatedMenu/1IMGup.jpg').css({'border': '1px solid #000'});
}

if you don't mind loading a minimal configuration of the jQueryUI Core, you can clean up a ton of code and transfer the needed settings to css classes:
http://jqueryui.com/docs/Effects/Methods
with it, you can define all your transitions in your site's css file, and then just use jQueryUI's addClass, removeClass, toggleClass, and switchClass methods:
so then your jQuery gets simplified down to something like:
$(this).find(".thumb").toggleClass('animatedClass', 100);
where the actual visual styling of each transition is in a separate css file:
mysite.css
.animatedClass {
width: 150px;
height: 150px;
margin: 8px 0px 0px 12px;
background: url(images/home/animatedMenu/1IMG.jpg);
border: 1px solid #FFF;
}
would also definitely make tweaking the effect easier, as you won't have to touch the javascript and you'd just adjust the CSS... throw in firebug, and you can even tweak the effects in real time w/o reloading.

jQuery has the posibility to be extended by plug ins, you could write one to be able to do:
$("#test1").mySpecialHover();
To write a plug in you will need to do:
(function($){
$.fn.mySpecialHover = function() {
//.. some code
}
})(jQuery);
Yo can check a good tutorial from the guys at doctype.tv http://doctype.tv/plugin