We Keep Coding

How to activate menu item with image based on steps using php, jquery?

I am working on a journal submission system. Previous and next buttons navigate each and every section. I want to display an image automatically before a menu item when I click the next button. How can I do this? I want it to look like this in the image.

You should provide your code to help you in better way, but I guess you mean that you want to marked as active link the current step into the process, if you are using php and jQuery, probably you can use the URL to know where are you exactly, eg:
with pure Javascript you can get the pathname part of the URL just like this
window.location.pathname
so imagine you have this list of steps
<ul>
<li class="steplist" data-step="step=1">
<a>Step 1</a>
</li>
<li class="steplist" data-step="step=2">
<a>Step 2</a>
</li>
<li class="steplist" data-step="step=3">
<a>Step 3</a>
</li>
</ul>
so now with jQuery you can make a function that execute when page load, like so:
function markCurrentStep() {
var currentStep = window.location.pathname;
var hasStep = currentStep.match(/step=(\d+)/);
if (hasStep && hasStep[1]) {
currentStep = hasStep[1]; // we get the step number eg: step=12 <- we get only 12
var currentStepList = $(".steplist").find("[data-step='" + currentStep + "']");
// make sure you find the element that match with the step based on data step attribute
if (currentStepList && currentStepList.length > 0) {
var imgMarker = $("<img src='URL_TO_IMAGE'/>");
currentStepList.prepend(imgMarker);
}
}
}
So, in php or html link yo nned to pass a step parameter into the URL, like so: https://yourwebpage.com/blog/?step=1
Hope this will be helpful to you.

how to select a div based on the data attribute that matches a variable?

I am trying to use Jquery ui tabs with salesforce communities, if a user is being directed from a different page to the current page, based on the project id of the previous page, the current page needs to highlight the appropriate tab.
These tabs are generated based on how many project a user
has which prevents me from giving them an ID inside the html
<script>
$(document).ready(function(){
var focusedProject = '{!focusedProjectId}';
$('.projectTabs').each(function(){
var id = $(this).data('salesforceprojectid');
if(focusedProject === id){
$('*[data-salesforceprojectid="HARD CODED ID"]').addClass('ui-state-active');
}
});
});
</script>
Where you see the words hard coded Id i want to put the variable focusedProject - it doesnt seem this is possible, does anyone know an alternate solution for this?
<ul>
<li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
<li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
<li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
<li class="projectTabs" data-salesforceprojectid="{!projectList.Id}"></li>
</ul>

you can't do
$('*[data-salesforceprojectid="' + focusedProject + '"]').addClass('ui-state-active');
to make the hard coded part into a variable?

toggle the nav-bar active element

I'm using blade template, the template contains a navigation bar. it is something like this
<ul>
<li class="active">page1</li>
<li>page1</li>
<li>page1</li>
</ul>
Using jquery I can make the li element active once clicked.
Now the problem is when I click on the second link the page2 will be loaded and that page extends the same template so it will load it again and there then the 1st element will be active. The solution that I thought about is adding a div to each page to let me identify the page
<div class="type" data-type="page2"></div>
and when the page is loaded I set the selected li element depending on the page type.
I try this and it is working the only thing is that I don't think it is the perfect solution. Is there an other more simple way to solve this?
Thanks

I'd set a class on the html element to identity your page. That way you can have javascript as well as css react to what type of page you're on. Not that you need css in this particular example, but down the line use-cases might pop-up and then you already have a solution in place.
edit:
Adding class dynamically through a tiny script:
//script in specific page
<script>pagetype = "page2"</script>
//script as part of layout template shared between pages
<script>
$(function(){
$("html").addClass(pagetype);
})
</script>

In my opinion, a better solution would be detecting the current page with Request::segment() (or Request::is(), depending on the stucture of your URLs) method. Combine that with a View composer to avoid passing data to each view manually.
An example:
The view composer:
class PageComposer
{
public function compose($view)
{
$view->with('active', Request::segment(1));
}
}
The service provider:
class PageServiceProvider extends ServiceProvider
{
public function register()
{
View::composer('partials.header', 'PageComposer');
}
}
The part of the header file that is common to all your pages:
<ul id='pages'>
<li id='page1'>page1</li>
<li id='page2'>page2</li>
<li id='page3'>page3</li>
</ul>
The script that changes the active class:
<script>
$(document).ready(function () {
var activeLink = $('#{{ $active }}');
activeLink.addClass('active');
});
</script>
More information about this in Laravel 4 documentation:
Requests
View Composers

You can compare anchor href to pathname and then add style or assign class to correct anchor e.g
...
<li>Link</li>
...
$('a[href="'+window.location.pathname.split('/').pop()+'"]').css({ color: 'red' });
or
$('a[href="'+window.location.pathname.split('/').pop()+'"]').addClass('current');

Setting active link dynamically on static navigation

I have "navigation.html" (static coded navigtaion ) file loaded on multiple pages, using jQuery .load()
Now I need to dynamically set active <li> for each page user clicking on. I can not use body id for specific reasons.
Any other ways to do this?

If you can identify your current page by class or id (ex: body > div#contacts) for contacts.html and this class/id is unique then you have to match it with you navigation, other way is to match window.location.href value (parsed if you want) against your navigation.
changeActiveLink is defined in JS (ex:init.js) file which you include to each page
function changeActiveLink() {
var currentLocation = window.location.href;
currentLocation = currentLocation.replace('//', '/').split('/');
var page = currentLocation[currentLocation.length - 1];
if (page == "") { page = 'index.html'; }
$('#leftNav1 a[href*="'+ page +'"]').addClass('active');
}
This line is called from each file when "init.js" is included.
$('#leftNav1').load('navigation.html', changeActiveLink);

Or you can use any HTML or even HTML5 tag to specify li item.
<li class="some">
or
<li title="some">
or
<li attr-specify="some-specific-in-url">
and jQuery with window.location object
$('li[title="' + window.location.path + '"]').addClass("active");

You could set up some jquery script to get the url and then find the href of the li that matches that. This will allow you to addClass() to that li of active.
This of course will only work if your href matches the url

Setting <li> class as active using Javascript, not working?

I have several javascript generated sub menus, which are displayed when a certain word is found in the current url.
I need to set a li tag to li class="active" so that the user can see which submenu page they are currently browsing.
I've found a variety of codes which seem to be relevant, but I can't seem to make any work! The below works perfectly to generate the sub menus though :)
If it helps I'm using the twitter bootsrap for design purposes, for some reason the css file has alot of arrows inserted, eg. .tabs > li
I don't really understand what the > has been inserted for, but could that be causing some kind of a problem perhaps?
Any help much appreciated!
var currenturl = location.pathname
if (currenturl.search(/welcome/i) >= 0)
{
document.write(<ul class="tabs">
<li>Home</li>
<li>Contacts</li>
<li><a href="user_manual.php" User Manual</a></li>
<li>Support & Help</li>
<li>Logout</li>
</ul>);
}
Ok Here's an update!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Wow thanks very much for the reply. I have added the code inside a javascript declaration before the closing body tag as mentioned, though on the welcome.php page I do not see any sub menu having been generated.
In response to the other comment, what I would like to achieve is generating a sub menu based upon the current pages URL.
If the URL contains "support" I would like it to load a certain menu, if "sales" I would like it to load another.
An example sub menu, the one I want to appear when "sales" is detected in the URL is as follows:
<ul class="tabs">
<li>Contacts</li>
<li><a href="sales-user_manual.php" User Manual</a></li>
<li>Support & Help</li>
<li>Something Else</li>
</ul>
To make the current sub menu active I have to further set an li tag active as such:
<li class="active">
This means I will need another piece of code to detect the end of the URL string eg. if the current page open is sales-contact_us.php then the li tag for that menu item is set active.
Thanks!

You should definitely not use document.write to append elements to the document. Use DOM methods instead, eg
var menu = [
{ "label": "Home", "href": "welcome.php" },
{ "label": "Contacts", "href": "contact_us.php" }
// etc
];
var list = document.createElement("ul");
list.setAttribute("class", "tabs");
for (var i = 0; i < menu.length; i++) {
var label = menu[i].label;
var href = menu[i].href;
var item = document.createElement("li");
var anchor = document.createElement("a");
anchor.appendChild(document.createTextNode(label));
anchor.setAttribute("href", href);
if (href == currentUrl) {
item.setAttribute("class", "active");
}
item.appendChild(anchor);
list.appendChild(item);
}
document.body.appendChild(list); // you may want to append the list to another container
Place the above in a script block at the end of your document (right before the closing </body> tag) to ensure the document has loaded before attempting to manipulate it.