All,
I am making a login page. Upon successful login, the username of the logged in user should display at the top of the screen. Upon clicking the username, a dropdown list should appear.
So I have an HTML script that will creates an un-ordered list. I want to make a call to an external javaScript function within the HTML. I want this function to edit the title of the un-ordered list with custom input handled in the javascript function, and make the list visible, as it is not displayed by default. How do I edit this script so I can call the function to create a custom title for my un-ordered list?
Javascript
function successfulLogin() {
$("#UserDropdown").show();
document.getElementById("loginMenu").innerHTML = "my stuff";
}
HTML
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div id="dropboxbackground">
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href="#">title</a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
<header>
<div id="headerBar"></div>
</header>
Create a label inside the anchor tag and upon clicking the username call the successfulLogin javascript method using href='javascript:successfulLogin()' or depending upon the type of control you have used for displaying the username.
<script src="~\Scripts\successfulLogin.js" style="display: none"></script>
<div>
<ul id="dropdown">
<li>
<a id="loginMenu" href='#'><label id="lbl"> title
</label></a>
<ul>
<li>Account Settings</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
And Write your javascript(jquery) as : This would change the title of the ordered list to "somestuff"
function successfulLogin() {
$("#UserDropdown").show();
$('#lbl').text("somestuff");
}
Related
I want the content of a page to change when a link in the sidebar is being clicked and also the url should change without the sidebar reloading.
I have been able to achieve changing the main content of the page without reloading the sidebar but I also need to change the url and make it specific to what sidebar content is being clicked.
How I change the content
HTML - When you click Welcome or Creating account it calls the changeContent() function
<div class=" sidebar-item sidebar-menu">
<ul>
<li class="header-menu">
<span>Get Started</span>
</li>
<li>
<a onclick="changeContent('/docs')"> <span id="welcome-btn" class="menu-text">Welcome</span> </a>
</li>
<li class="sidebar-dropdown">
<a> <span class="menu-text">Setting up</span>
</a>
<div class="sidebar-submenu">
<ul>
<li> <a id="creating-account" onclick="changeContent('/docs/settingUp')">
Creating account</a> </li>
<li> Starting transactions </li>
<li> Resolving transactions </li>
<li> Refund </li>
</ul>
</div>
</li>
</div>
<!-- page-content -->
<div class="main--c">
<%- include ../partials/docs/welcomeDocs.ejs %>
</div>
JAVASCRIPT
function changeContent(url) {
$('.main--c').load(url);
}
My express config
router.get('/docs', (req: Request, res: Response) => {
res.render('pages/docs');
})
router.get('/docs/settingUp', (req: Request, res: Response) => {
res.render('partials/docs/settingUp');
})
This works, it changes the content without reloading the whole page but when you click on Create account I want to also change the url. So that whenever someone enters the url in the browser, It should load the create account page.
I tried add href="docs/settingUp" to the anchor tag but instead it loads only the partial page without the navbar and other styling
I want to be able to have a centralized menu like CSS files where you change it at the source and all the files change but for lists. I'm trying to add a new link to the menu without having to go to each file on the website to add to the copy and pasted list that we have.
<nav id="menu">
<div class="inner">
<h2>Menu</h2>
<ul class="links">
<li>Home</li>
<li>Sponsors</li>
<ul class="links">
<li>Sponsor Application</li>
</ul>
<li>Media</li>
<ul class="links">
<li>2019 Season</li>
<li>2018 Season</li>
<li>2017 Season</li>
<li>View More Seasons</li>
</ul>
</div>
</nav>
being able to add a html to the list and it changes for every part you go to.
there is my html code for switch user to some pages in my php website
<div class="nav">
<ul onChange="showUser(this.value)">
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico7.png"></span>
<span class="value">manager</span>
</div>
<ul>
<li>chenge pass </li>
<li>search</li>
<li>exit</li>
</ul>
</li>
<li class="active">
<div class="fix">
<span class="ico"><img src="image/ico3.png"></span>
<span class="value">show user</span>
</div>
</li>
</ul>
</div>
it work good but i want to learn how can I transform between pages with ajax code, by click on a list item codes calling from page b and show in page a. so it will be faster than html code
how can i do it?
You can use .load function of jquery to load a page in a div like this
function LoadPage(url){
$('#yourMainDiv').load(url, function (response, status, xhr) {
//you can put you logic here
});
}
Here url will be url of page which you want to load in the div.
You will call it like
LoadPage('chengePass.php');
Or you can do like say in first answer but add href="#" onclick="LoadPage('chengePass.php');return false;"
link
or
<li onclick="LoadPage('chengePass.php');return false;">link</li>
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help
I have a site whose content is appearing in this format:
<div id='foo'>
<ul>
<li>
</li>
</ul>
<ul>
<li>
</li>
</ul>
<ul>
some text
</ul>
</div>
I want to find the last anchor tag and if that exists, then I want to grab the content appearing after the last anchor tag and display it in a div. The expected result/html which I want from above example is:
<ul>
some text
</ul>
What is the best way to do this?