button in header menu php - php

i created a header.php for my web site.
For my menu, i created 5 buttons.
When i press on a button it redirect me on the page associated to it.
Until now everything fine.
What i want is, on the current page, my button of the page associated to it change to an other color or background image.
I dont know if we can do that and if i explain myself well.
here my header.php
<div id="main_menu">
<div id="menu_blog"><button onclick="location.href='blog.html'"><h1>Trucs/Astuces</h1></button></div>
<div id="menu_contact"><button onclick="location.href='/contact.php'"><h1>Contact</h1></button></div>
<div id="menu_soumission"><button onclick="location.href='/soumission.php'"><h1>Soumission</h1></button></div>
<div id="menu_realisation"><button onclick="location.href='/realisations.php'">
<h1>RĂ©alisations</h1></button></div>
<div id="menu_service"><button onclick="location.href='/services.php'">
<h1>Services</h1></button></div>
<div id="menu_a_propos"><button onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>

Simple way is use CSS
#yourbutton:hover{
background-color: red;
}
or
#yourbutton:active{
background-color: red;
}

Pass a GET value with each link
<div id="menu_contact"><button onclick="location.href='/contact.php?active=1'"><h1>Contact</h1></button></div>
check the value of active in the button
< button <?php if ($_GET['active']==1) echo 'class="active"'; ?> ..../>
then make a css style for active class
.active{
/*your style here*/
}

Your PHP page:
<div id="main_menu">
<div id="menu_blog">
<button onclick="location.href='/blog.html'" <?php if($_SERVER['REQUEST_URI'] == '/blog.html'){echo 'class="currentPage"'; }?>>
<h1>Trucs/Astuces</h1>
</button>
</div>
… and so on for each menu item ...
</div>
Your CSS:
button.currentPage{
background-color: red;
}

Short version:
add $current_location to every page and name it after it
<?php
$current_location = "a_propos" ;
?>
Check if location is correct, then change background color
<div id="main_menu">
<div id="menu_a_propos"><button <?php if ($current_location == "a_propos");?> style=" background-color: red;"<?php };?> onclick="location.href='/a_propos.php'"><h1>L'entreprise</h1></button></div>
</div>

Related

Move elements one below other in block

I have this little problem with my site. I want to move block title and second line to center, and button to keep in at center too, something like this:
image how wanted to look
Currently it looks like this:
current look on block
Where can be seen this form is here at bottom of page. This is what I do to customize it myself, I updated this CSS class:
.heading {
font-family: GOTHAM-BOLD;
font-size: 28px;
color: #273a55;
margin-left:340px; // i added this line, but seems it mess entire look.
}
and this is PHP code from that form:
<div class="footer box">
<div class="bluebg box"></div>
<div class="container">
<div class="footermain box">
<div class="footertop box">
<div class="row">
<div class="col-md-6 nopd">
<div class="ftleft box">
<div class="ftlinner box">
<h1 class="heading"><?php echo (get_field('news_letter_title'))?get_field('news_letter_title'):get_field('news_letter_title', 'option') ?></h1>
<?php echo (get_field('news_letter_tag'))?get_field('news_letter_tag'):get_field('news_letter_tag','option') ?>
</div>
</div>
</div>
<?php
endwhile;
It seems that Heading title and line bellow that is contained into one class called heading. So question now is now to move to center to start looking like image provided.
Follow these steps :
Change your col-md-6 class to col-md-12 in both the text bloc and the button bloc.
Add class text-center to the text column like this
<div class="col-md-12 nopd text-center" >
Add style justify-content: center; to "footertop box" like this :
<div class="footertop box" style="justify-content: center;">
Remove class noleft from button column and add margin:0 to button
as far as I understand, you want to have the texts centered and the button below them
for quick solution, add this class to your css:
.footertop.box .row {
display: block;
width: 100%;
text-align: center;
}
delete div's col-md-6 classes which are in div.row

Remember last tab after redirect

I have a complex view on Laravel with a lot of tabs and forms, the user can navigate on the tabs and do various form submits on every tab, after the submit the controllers returns the same view with a current tab variable, looks like this:
...Controller actions...
return view("store.tesla.user.components")
->with('tab', '3');
Every tab got an ID so when I go back to my view I just search for the active tab and put active with jQuery like this:
var tb_active = <?php echo $tab; ?>
$('#'+tb_active).addClass('active');
Actually it works, but I feel dirty mixing PHP+JS specially using Laravel framework and looks not so well done, so there are my question/s:
There is another way to do it better or more simple?
My view is extremly big and I have a lot of css classes, if I copy my code there it will be messy, so I fork a codepen with bootstrap tabs for better showing :)
https://codepen.io/Troyer/pen/MbGQPJ
HTML
<div class="container"><h1>Bootstrap tab panel example (using nav-pills) </h1></div>
<div id="exTab1" class="container">
<ul class="nav nav-pills">
<li class="active">
Overview
</li>
<li>Using nav-pills
</li>
<li>Applying clearfix
</li>
<li>Background color
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
<div class="tab-pane" id="4a">
<h3>We use css to change the background color of the content to be equal to the tab</h3>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
CSS
body {
padding : 10px ;
}
#exTab1 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
#exTab2 h3 {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
/* remove border radius for the tab */
#exTab1 .nav-pills > li > a {
border-radius: 0;
}
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills > li > a {
border-radius: 4px 4px 0 0 ;
}
#exTab3 .tab-content {
color : white;
background-color: #428bca;
padding : 5px 15px;
}
Thank you for your time.
Have you tried hidden fields. You can set that tab active by read that hidden value like:
$( ".selector" ).tabs({ active: $('#your-hidden-fiel').val() });
See the full example.
create an array in js below your content section
var pagedefaults = {
activetab: "{{ $activetab }}",
};
Here $activetab is coming from your controller. Now you can use active tab value like pagedefaults.activetab in your javascript and make tab active.
This can also be used in localisation and Ajax Routes.

How to manage multiple div in one line with horizontal scrollbar

I want to display 30 same div. So I am taking for loop with showing 30 div. Now I want div in only one line. If the div is out of screen then it will show horizontal scroll bar.
The code is:
<div id="sort-able" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" >Home - <?php echo $j;?></div>
<?php } ?>
</div>
<div id="sort-able" style="width: 100%; overflow-x: scroll; white-space:nowrap;" >
<?php for($j=0;$j<30;$j++){?>
<div class = "dragg-able" style="display:inline; ">Home - <?php echo $j;?></div>
<?php } ?>
</div>
Example: http://kelostrada.pl/test.php

Multiple Toggles Almost like Tabs JavaScript/ CSS

I want to create tabs that function like toggles, but instead only one toggle can be active at one time. The content of the tab also needs to be above the the tabs themselves. The problem is I am using a loop to generate the content as well as the tabs themselves.
I've got a nice javascript code right here that works perfectly fine. I understand this perfectly as well. The only problem is that it obviously doesn't disable other toggles when another one is clicked. Also having one "tab" / "toggle" always active. Code that could probably check the div id with a prefix of "post" and make all div id's with "post" to display:none besides the one that was clicked on. That would be perfect if that could be possible. Another way I could think of this is putting all the generated content into a container, and it simply disables all id's in the container besides the one that was clicked.
If this code can be modified to achieve that, it would be great. This is some very simple code that I understand very clearly. All I need is that it behaves more like tabs where only one can be active at once.
<script type="text/javascript">
function toggleMeMirror(a){
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
</script>
HTML / PHP
Loop 1 - The Content
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div id="post-<?php the_ID(); ?>" style="display:none;">
<center><?php the_title(); ?><br /><br />
<?php echo get_post_meta(get_the_ID(), 'mirror_embed_code', true); ?>
<?php wprp(true);?>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
Loop 2 - The actual toggles / tabs
<?php while ($queryepisodemirrors->have_posts()) : $queryepisodemirrors->the_post(); ?>
<?php if(get_post_meta(get_the_ID(), 'parentIDmirror', true) == $postIDCheck) { ?>
<div style="float: left; padding: 4px;">
<center>
<div class="post-<?php the_ID(); ?>" onclick="return toggleMeMirror('post-<?php the_ID(); ?>')" >
<div style="overflow: hidden; width: 150px; height: 100px;">
<div style="background: rgb(0, 0, 0) transparent; /* fallback color */ background: rgba(0, 0, 0, 0.8); color: white; padding: 2px;">
<center>
<?php echo get_post_meta(get_the_ID(), 'video_provider', true);
echo ' Mirror';?>
</center>
</div>
<img src="<?php echo $thumbnail_src; ?>" width="150px"/>
</div>
</div>
</center>
</div>
<?php } ?>
<?php endwhile; ?>
This is also tagged jquery so I'll just recommend that you include the jquery library and include:
$('.someclass').hide();
as the first line in the toggleMeMirror function.
Then, make sure that each of your looped content divs exist in the class "someclass".
like:
foreach($this as $that) {
print "<div class='someclass'>$that</div>";
}
then
function toggleMeMirror(a){
// hide all
$('.someclass').hide();
// show one
var e=document.getElementById(a);
if(!e) return true;
if(e.style.display=="none"){
e.style.display="inline"
} else {
e.style.display="none"
}
return true;
}
You can try something like this DEMO
HTML Code
<div id="one"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='50px' widht='50px' ></div><br>
<div id="two"><img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='50px' widht='50px' ></div><br>
<div id="three"><img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='50px' widht='50px' ></div><br><br>
<div id="thumb"><img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' ></div>
jQuery
$("#one").click(function() {
$("#thumb").html("<img src='http://img.widgetbox.com/thumbs/302/8fb0669c-72ee-454d-a08f-9700b8a5270a.png?4' height='200px' widht='200px' >");
});
$("#two").click(function() {
$("#thumb").html("<img src='http://ww2.valdosta.edu/~mecarter/Spongebob%20Reading.png' height='200px' widht='200px' >");
});
$("#three").click(function() {
$("#thumb").html("<img src='http://www.cliffdweller.com/blogPhotos/wrappingpaperbase/Spongebob%20Waving.png' height='200px' widht='200px' >");
});

Jquery multi DIVs hide/show

i want to show hide multiple divs with jquery or javascript.
I seached the web but i find codes that must have unique divs
like:
<div id="div1">text</div>
<div id="div2">text</div>
and so on, but i want to add the divs in a foreache php function so i can't have multiple IDs,
the foreache is a div wrapper.
So, my question is how can i do that ?
EDIT
Because i am complete noob at JQuery i don't know how to implement anything,
so i have this
<div id="wrapper">
<div class="title">
<div class="hide"> Hidden Text</div>
</div>
</div>
When i click the title div, i want the class="hide" to be shown.
Solution:
.box
{ margin:10px;
height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(this).next().slideToggle(500);
});
});
</script>
<div class="box">
<h1>This is the div</h1>
<div class="flip">If u click </div>
<div class="panel"> This will show</div>
The problem was as i said the div were generated by the foreach function and this solved it, Thanks to all ! I have much to learn.
You can try
<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>
Then
$('.toggle').toggle(); //Automatic Display or hide the matched elements.
You can assign common class and later use that class selector to show hide divs with common class.
Live Demo
<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>
$('.someclass').show();
there are two ways of doing it:
select divs by class
select children div of the wrapper
The first method is like everyone else described, add the class attribute to select the divs:
<div class="hide">content</div>
and
$(".hide").hide();
The second method is to give the parent div an unique id:
<div id="wrapper">
<div>content</div>
<div>content</div>
</div>
then select all it's children by tag name:
$("#wrapper div").hide();
Add some class to select all dives to hide,
<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>
And then hide them all ,
$('div .toHide').hide();
Solution 1
<div id="div1">text</div>
<div id="div2">text</div>
jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();
Solution 2
<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>
jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();
Another answer:
Use the parent element:
<div id="yourId">
<div id="div1">text</div>
<div id="div2">text</div>
</div>
$("#yourId div").hide();

Categories