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.
Related
I want to put my menu in a separate PHP file so when I need to edit it, I only have to edit it once. The problem starts when I want to highlight the active page. Can someone help me to fix it?
<?php $currentPage = basename($_SERVER['SCRIPT_FILENAME']); ?>
Toggle navigation
<li></span> Home</li>
<li></span> About us</li>
<li class="dropdown">
<span class="glyphicon glyphicon-calendar"></span> Services <span class="caret"></span>
<ul class="dropdown-menu">
<li></span> Drivers services</li>
<li></span> Shop services</li>
</ul>
</li>
<li></span> On-line Application</li>
<li></span> Contact us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="clearfix"> </div>
</div><!-- navbar -->
I find the solution to my question adding this css in styles file:
/* The here ID identifies the current page and applies a white color to the text and a black background as a visual indicator. */
a#here {
background-color: #000 !important;
color: #fff !important;
}
Plus call the menu in each page with following code:
<div> <?php
$file ='includes/menu.php';
if (file_exists($file) && is_readable($file)) {
include($file);
} else {
throw new Exception("$file can't be found");
}
include('includes/menu.php');?>
</div>
A quick and dirty method to achieving this is in each file put the following:
<?php
include("header.php"); // Insert location of header file here
?>
and in your header.php file after creating your head block insert this
<?php $active= substr(basename($_SERVER['SCRIPT_FILENAME']),0, -4); ?> // Page Name
<body <?php echo "class='$active'";?>> // This sets the bodies class to be the page name.
finally in style.css use the following code to set the highlighted feature
// This is an example for my CSS. Insert your own css selector
// In my css i have this which adds a small orange bar to the bottom of the navigation option. I set the opacity to 0 to not display it.
.header nav ul li a:before
{
height: 5px;
background: #ea5c18;
opacity: 0;
}
// Then i set .PageName (the bodies class name) and set that specific nav element to have an opacity of 1.
.PageName .header nav ul li:first-child a:before
{
opacity:1;
}
I am trying to add '+' Symball in front of category navigation on left side
I am using magento 1.9.x
This code i fount in category-navigation.phtml
I want to know how <?php echo $_menu ?> this comes from?
<div class="block vertical-menu">
<div class="title-block" style="margin-bottom:0px;"><h4><?php echo $this->__($title) ?></h4></div>
<div class="block-content">
<ul id="content-navigation">
<?php echo $_menu ?>
</ul>
</div>
</div>
My suggestion would be to do it in CSS. You can use Ionicons or something similar.
The $_menu html is generated inside the block class, rather than using a phtml file. So, you could extend that block and customize it, but this can also be achieved using CSS without having to worry about extending the block.
An example would be the following:
Example HTML
<nav id="nav">
<ol>
<li>Plus Sign</li>
<li class="active">Minus Sign</li>
</ol>
</nav>
Example CSS - This requires Ionicons
ol {
list-style: none;
}
#nav li::before {
font-family: Ionicons;
content: '\f489';
padding-right: 10px;
}
#nav li.active::before {
content: '\f209';
}
JS Fiddle - A working sample
https://jsfiddle.net/adpro/5xbw80b1/
So I am trying to create a dropdown menu with jquery and have a div (the dropdown) with display: none. I am trying to fire the jquery toggle when an li item in the above nav bar is clicked. If anyone could take a look at this code and see if there are any obvious errors, that would be great.
Thanks
PS The php code is present as I am working with WP
<ul class="right-nav">
<li style="padding-left: 10px; cursor: pointer;" id="current-user">
<?php $current_user = wp_get_current_user(); echo $current_user->user_login; ?>
</li>
</ul>
The dropdown menu:
<div class="dropdown-wrapper">
<div id="user-menu" class="user-menu">
<ul>
<li>Hello</li>
</ul>
</div>
.user-menu {
display: none;
}
And then the jQuery event itself:
$(document).ready(function() {
$('#current-user').click(function() {
$('#user-menu').slideToggle("fast");
});
});
Man... I guess I kinda got it. Remove the CSS:
.user-menu {
display: none;
}
And instead, in teh document's ready, give this:
$(".user-menu").hide();
Trust me, this makes a difference. The reason is, the jQuery first checks if the style="display: none;" is there or not in the element, as it is not there, because it is given by the CSS, it gives another display: none inline style. This doesn't make any difference. But third time click will reveal it. Give it a try.
facing a bit of a difficult area in my first page itself (index.php), these are the things that I hope to have. I assume these can be solved with HTML.
I hope to have the menu listing on the left, and when selected, should be able to call other php programs, which will be displayed on the right.
The selected item from the list on the left should be made bold.
The default page should be “home” (the first on selection list).
I have given below the code that I came up with but it doesnt work the way I like it to work.
Part of index.php
<table id="structure">
<tr>
<td id="navigation">
<ul class = subjects>
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</li>
</ul>
</td>
<td id="page">
<h2> Home </h2>
<div class = "page-content" >
<p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p>
</div>
</td>
</tr>
</table>
Part of the CSS is as below
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }
jQuery has a very convenient method $(element).load() for you to load HTML and insert into the element that you specified.
Example usage:
<table id="structure">
<tr>
<td id="navigation">
<ul class ="subjects">
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</li>
</ul>
</td>
<td id="page">
<h2> Home </h2>
<div class = "page-content" >
<p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p>
</div>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- optional if you have jQuery already -->
<script>
$(document).ready(function() {
// Once the page is ready for using jQuery, we now bind a "click" action to all "a" element via CSS selector which will be processed by jQuery.
$(".subjects a").click(function() {
// Whenever any link of above is clicked, it goes to here
// This is a convenient method provided by jQuery to do:
// 1. Try to make a HTTP request (AJAX) to the link (this.href = the content of the "href" attribute of the element clicked)
// 2. Once it gets the response, put the content to div with class ".page-content"
$(".page-content").load(this.href);
// Return false here so that the browser will not go directly the link, but stay on the same page instead
return false;
});
});
</script>
Note: Please avoid using table to layout your page. Try to use CSS + div - a better way to layout :D
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>