So, I'm building a login system using a "numpad". There are four numbers on one row and for rows. One number per row should be selected and those should then be correct for a login. The "numpads" are like this, four rows, four numbers:
<div class="numbers-1">
<a class="num-1 active" href="#">1</a>
<a class="num-2" href="#">2</a>
<a class="num-3" href="#">3</a>
<a class="num-4" href="#">4</a>
</div>
<div class="numbers-2">
<a class="num-1 active" href="#">2</a>
<a class="num-2" href="#">3</a>
<a class="num-3" href="#">4</a>
<a class="num-4" href="#">5</a>
</div>
<div class="numbers-3">
<a class="num-1 active" href="#">3</a>
<a class="num-2" href="#">4</a>
<a class="num-3" href="#">5</a>
<a class="num-4" href="#">6</a>
</div>
<div class="numbers-4">
<a class="num-1 active" href="#">4</a>
<a class="num-2" href="#">5</a>
<a class="num-3" href="#">6</a>
<a class="num-4" href="#">7</a>
</div>
Here the numbers selected now would be 1 2 3 4 as the css class for these is "active". jQuery changes the classes. Is it possible to make python check if these are correct? In another words, is it possible to make python "if css class for certain links here is 'active' do something else don't"? Or how do you propose this thing to be done?
The thing looks like this online:
http://cl.ly/image/0T1y3l3I3h22
The code that would be executed if the correct numbers were selected would be just a redirect to the page requiring the login. The python would be this then:
def login():
if ...... # if the css class for the links is not whatever it should be
error = 'an error message'
else:
return redirect(url_for('the_page_requiring_login'))
The reason python would be nice would be that I'm using Flask for the site and this code above would be very convenient therefore.
Related
I have 2 html files
index.html and services.html
On services.html I have
<a class="nav-link" data-bs-toggle="tab" href="#ds-tab">Data Science</a>
<a class="nav-link" data-bs-toggle="tab" href="#ai-tab">AI</a>
<div class="tab" id="ds-tab">
<p>DS section </p>
</div>
<div class="tab" id="ai-tab">
<p>AI section </p>
</div>
It works fine on services.html
But if I am on index.html and I have a link as
AI Section
It doesnt work it just navigates to the page but doesnt show the div I am refering to.
I tried doing something like this but it doesnt work too.
<a data-bs-toggle="tab" href="services.html#ai-tab">AI</a>
Add a data-target attribute to the AI Section link, and set it to the id of the ai-tab div:
<a data-target="#ai-tab" href="services.html">AI Section</a>
I'm working on a small personal project and i have a small issue that i'm not sure how to solve. I use Bootstrap4 , ejs templating engine and express.My project has a Navbar where i show Sign in if user is not signed in and Account in the opposite case.
Here is a relevant part of the Navbar:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto ">
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item navbar-item">
<a class="nav-link" href="/">Some link </a>
</li>
<li class="nav-item navbar-item " id="nav-signIn">
<a class="nav-link" href="/signIn">Sign in</a>
</li>
<li class="nav-item dropdown navbar-item" id="nav-account">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Account
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
This is the function that controls what to show on the client side:
function displayAccountOrSignIn() {
if (!document.cookie.split(';').filter((item) => item.includes('logedIn=')).length) {
document.querySelector('#nav-account').style.display = 'none'
}
else {
document.querySelector('#nav-signIn').style.display = 'none'
}
}
My problem is that Navbar is 'jerking' because it first loads HTML and then hides what should not be displayed. I can fix it by checking cookies on the server and then conditionally render parts of Navbar, but i don't think it's a good idea to do so. I'd appreciate any suggestions.
There are a number of options here. To know which one to recommend, we'd probably need to play with your actual site and try a few things. All will work and prevent showing something that shouldn't be seen, some may display sooner.
Have all conditional content hidden first (so nothing ever displays that shouldn't) and then enable display of appropriate parts using your conditional Javascript.
Hide the whole toolbar by default in the HTML until you have run your conditional code and then show the whole toolbar only once its state is finalized at the end of your Javascript. If desired, you can make the toolbar be visibility: hidden rather than display: none so that it still takes up the appropriate vertical height and doesn't cause other content to shift down when it is finally displayed.
Run your conditional script inline in an inline <script> tag immediately after the toolbar HTML. This will ensure that the script runs ASAP after the toolbar HTML is available. You can combine this with either #1 or #2 above.
Determine the proper toolbar server-side so that the HTML that arrives at the browser is already properly pre-formed. Since the server already knows whether the user is logged in or not, this should be possible.
I have a single page application written using knockout/jquery. However, I am struggling to find a better way to handle what view to show. As i need more menu items you can see how the code will be more unmanageable. I would like to be able to show a view based on what is selected and change the CSS so you can see which tab is selected too.
<div class="col-md-2 sidebar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" data-bind="click: ShowDashboard, css: DashboardSideBarCss">
Dashboard
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowCompanyDetails, css: CompanyDetailsSideBarCss">
Company Details
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEmployees, css: EmployeesSideBarCss">
Employees
</a>
<a href="#" class="list-group-item list-group-item-action non-active-sidebar"
data-bind="click: ShowEtc, css: EtcCss">
etc....
</a>
</div>
</div>
use a single class/click for the view change-links and add a new attribute containing a "key" of your view, sth like:
<a href="#" data-view="dashboard" data-bind="click: changeContent">
in your changeContent function read the attribute and set it to a new observable e.g 'currentView'
sth. like:
vm.currentView($(this).attr('data-viewkey'))
(or however you are used to code)
you can then just show the correct content like:
<div style="display:none" data-bind="visible:vm.currentView()=='dashboard'" >
....
or you can toggle an 'activeclass'
data-bind="attr:{class:'static_classes '+(vm.currentView()=='dashboard' ? 'active' : 'inactive' )}"
or add individual dynamic selectors
data-bind="attr:{class:'content_'+vm.currentView()}"
tl;dr introduce a new observable holding a "viewkey" on which everything is based on and you can do whatever you want
I'm trying to fix my jquery issue where I swap content from separate html pages stored in multiple sub folders. My menu has over 100 link items that I need to work with on my site. Links 1-4 work well and swap without issue but any beyond that cease to function. The initial code I sourced off the net. Just not sure why it's not working fully as I need all 100+ links active. Any help would be much appreciated and thanks in advance.
The below code is part of the CSS menu. link1, link2, link3, and link4 all work as they should but beyond that nothing seems to function.
<ul>
<li>
<a id="link1" href="#" onmouseover="roll('but1', 'images/blueeye/blueeye_b1_over.png')" onmouseout="roll('but1', 'images/blueeye/blueeye_b1.png')">
<img alt="Home" src="images/blueeye/blueeye_b1.png" name="but1" class="style3" /></a>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but2', 'images/blueeye/blueeye_b2_over.png')" onmouseout="roll('but2', 'images/blueeye/blueeye_b2.png')">
<img alt="Worship Programs" src="images/blueeye/blueeye_b2.png" name="but2" class="style3" /></a>
<ul style="width: 170px">
<li><a id="link2" href="#">Our Worship Program</a></li>
<li><a id="link3" href="#">Sabbath School</a></li>
<li><a id="link4" href="#">Divine Service</a></li>
</ul>
</li>
<li>
<a href="javascript:vold(0)" onmouseover="roll('but3', 'images/blueeye/blueeye_b3_over.png')" onmouseout="roll('but3', 'images/blueeye/blueeye_b3.png')">
<img alt="Sabbath School" src="images/blueeye/blueeye_b3.png" name="but3" class="style3" /></a>
<ul style="width: 160px">
<li><a id="link5" href="#">Current Lesson</a></li>
<li><a id="link6" href="#">Mission Story</a></li>
<li><a id="link7" href="#">Adult Lessons</a></li>
<li><a id="link8" href="#">PowerPoint Helps</a></li>
<li><a id="link9" href="#">Picture Memory Verses</a></li>
</ul>
</li>
</ul>
The below javascript is the swapping. As stated above link1-link4 all function but link5 onwards doesn't.
Code begins here:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#link1").click(function(){$("#site_content").load("homepage.htm");});
$("#link2").click(function(){$("#site_content").load("about/worship-program.htm");});
$("#link3").click(function(){$("#site_content").load("about/ss_worship.htm");});
$("#link4").click(function(){$("#site_content").load("about/div_worship.htm");});
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
$("#link11").click(function(){$("#site_content").load("");});
$("#link12").click(function(){$("#site_content").load("");});
$("#link13").click(function(){$("#site_content").load("");});
$("#link14").click(function(){$("#site_content").load("");});
</script>
please check that #site_content_ss exists,
unexpected identifier
this part:
$("#link10").click(function()$("#site_content").load("kjv_bible/kjv_bible.htm");});
should be this:
$("#link10").click(function(){$("#site_content").load("kjv_bible/kjv_bible.htm");});
I'd create a example https://jsbin.com/muvoyuredu/edit?html,js,output
UPDATE
if you would to swap content into #site_content
$("#link5").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content_ss").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
should be this:
$("#link5").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-current.htm");});
$("#link6").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-mission-story.htm");});
$("#link7").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pdf.htm");});
$("#link8").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-pptx.htm");});
$("#link9").click(function(){$("#site_content").load("weekly_updates/sabbath_school/ss-lesson-memory-verse.htm");});
if you want stay on selected div block on refresh
href # change to #id (e.g. href="#link1" )
get id in the query string than auto click this link
I'd create a example https://jsbin.com/cocuvaraqu/edit?html,js,output
I'm trying to figure out if it's possible (and if so how) to change a link's color by polling the title attribute. I'm working with an HTML page that is generated from another script that creates a accordion list of hyperlinks. A couple of those hyperlinks I'd like to highlight, and I believe I can shoehorn in some JavaScript to do this (and the title attribute is the only unique element I can rely on), but I'm not sure how to write it. Here's what a bit of the list page looks like:
<div class="AccordionPanel AccordionPanelOpen">
<div class="AccordionPanelTab">
Forms
</div>
<div class="AccordionPanelContent" style="height: auto; display: block;">
<ul class="arrows searchSubtype">
<li class="">
<a title="Form-1.doc" target="_top" href="../Form-1.doc">
Form 1
</a>
</li>
<li class="">
<a title="Form-2.doc" target="_top" href="../Form-2.doc">
Form 2
</a>
</li>
<li class="">
<a title="Form-3.doc" target="_top" href="../Form-3.doc">
Form 3
</a>
</li>
<li class="">
<a title="Form-4.docx" target="_top" href="../Form-4.docx">
Form 4
</a>
</li>
</ul>
</div>
</div>
Sure, use the attribute selector:
$("a[title='Form-4.docx']").css("color","red");