I take out the codes related to menu area (as shown below) from index.html to an independent file header.html,
and then include header.html into index.html with,
<body>
<div id="header"></div>
...
<script>
$("#header").load("header.html");
</script>
</body>
However, when I click the search button, there is no response. Originally, a search box should appear as shown below.
The related codes are listed below, (the complete example is here)
<!-- page search box -->
<div class="page_search_box">
<div class="search_close">
<i class="ion-close-round"></i>
</div>
<form class="border-bottom" action="#">
<input class="border-0" placeholder="Enter keyword..." type="text" />
<button type="submit"><i class="ei ei-search"></i></button>
</form>
</div>
<div class="main_header_right d-flex align-items-center">
<div class="header_account">
<ul class="d-flex">
<li class="header_search"> <i class="ei ei-search"></i> </li>
</ul>
</div>
<div class="canvas_open">
<i class="ion-navicon"></i>
</div>
</div>
What's wrong?
Related
I am a student & i am working on practicing an app for a blog post. Downloaded "clean-blog" template on startbootstrap website.
Link attached:https://startbootstrap.com/theme/clean-blog
Now using Node & EJS trying to work on form submission. But the form is not getting passed through. There was a comment snippet which said: activation token needed
I am not even getting a change in mouse pointer to 'click-finger' when my mouse is near the submit button. I am a student & just using this for learning purpose. Tried removing all unwanted attributes, but still the the form is not getting activated. Now I have undone the changes I did to the page. Below is the code for my ejs file.
Can anyone help me activate the "form" just for demo purpose? What all should I remove for this to happen?
'''
<!DOCTYPE html>
<html lang="en">
<!-- Header-->
<%- include('layouts/header'); -%>
<body>
<!-- Navigation-->
<%- include('layouts/navbar'); -%>
<!-- Page Header-->
<header class="masthead" style="background-image: url('/assets/img/contact-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="page-heading">
<h1>Create New Post</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<main class="mb-4">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<p>Want to get in touch? Fill out the form below to send me a message and I will get back to
you as soon as possible!</p>
<div class="my-5">
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form action="/posts/store" method="POST" data-sb-form-api-token="API_TOKEN">
<div class="form-floating">
<input class="form-control" id="title" name="title" type="text"
placeholder="Enter the title..." data-sb-validations="required" />
<label for="title">Title</label>
<div class="invalid-feedback" data-sb-feedback="name:required">Title is
required.</div>
</div>
<div class="form-floating">
<textarea class="form-control" id="description" style="height: 12rem"
placeholder="Enter your message here..." style="height: 12rem"
data-sb-validations="required"></textarea>
<label for="message">Description</label>
<div class="invalid-feedback" data-sb-feedback="message:required">A Description is
required.</div>
</div>
<br />
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center mb-3">
<div class="fw-bolder">Form submission successful!</div>
To activate this form, sign up at
<br />
https://startbootstrap.com/solution/contact-forms
</div>
</div>
<!-- Submit error message-->
<!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage">
<div class="text-center text-danger mb-3">Error sending message!</div>
</div>
<!-- Submit Button-->
<button class="btn btn-primary text-uppercase disabled" id="submitButton"
type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</main>
<!-- Footer-->
<%- include('layouts/footer'); -%>
<!-- Scripts-->
<%- include('layouts/scripts'); -%>
</body>
</html>
'''
Personally I just removed the class 'disabled' on the submit button like the example below and it worked:
error:
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
right answer:
<button class="btn btn-primary text-uppercase" id="submitButton" type="submit">Send</button>
I just removed the css attribute for the button tag & it started working...! Now my form is working absolutely fine.!
<button class="btn btn-primary text-uppercase disabled" id="submitButton" type="submit">Send</button>
EDIT: My source is at https://bitbucket.org/kunaladhia01/studentaccounts/src
css file is under static/css/main.css
html is at template/student/index.html
So far, my code looks like this
<div class="content-wrap">
<header class="hero-area" id="home">
<div class="container">
<div>
<div class="nav navbar-inverse sticky-navigation navbar-fixed-top" data-spy="affix" data-offset-top="200">
<div class="container">
<nav>
<div class="nav-wrapper">
<form onsubmit="return false;">
<div class="input-field">
<input id="search" type="search" required placeholder="Search">
<label for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
<button class="menu-icon" id="open-button">
<i class="mdi-navigation-menu"></i>
</button>
</div>
</nav>
</div>
</div>
</div>
There are two problems I have so far, which should be an easy fix, but its been 3 hours and I still have no progress
zippyshare com/v/h2ThM1Xi/file.html
zippyshare com/v/0h9KvaQI/file.html
(add the dot in)
I need to make the menu icon go into the same row as the search bar (class="row" wont work) and there's this blue bar behind the search bar, which i have no idea where it came from
I have some html that is rendered by Flask. I have three navigation tabs that the user can click on to see different panels. This is the relevant code:
<div class="tabbable">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Pick Colors
</li>
<li>Add Text
</li>
<li>Add Logos
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="well">
<ul class="nav">
<li class="color-preview" title="White" style="background-color:#ffffff;"></li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab2">
<div class="well">
<div class="input-append">
<input class="span2" id="text-string" type="text" placeholder="add text here...">
<button id="add-text" class="btn" title="Add text"><i class="icon-share-alt"></i>
</button>
<hr>
</div>
</div>
</div>
<div class="tab-pane" id="tab3">
<div id="avatarlist">
<img style="cursor:pointer;" class="img-polaroid" src="static/img/img1.png">
</div>
</div>
</div>
When I open the HTML file by itself, I can click on the different tabs and get the relevant tab-pane's to open up. When the page is rendered by Flask though, I'm unable to get the functionality to work. Clicking the tabs doesn't do anything. What am I doing wrong?
I understand Flask uses Jinja templates so I must not be understanding that properly, but I'm not sure how to fix it. Thanks in advance for your help.
I just fixed it. The issue was that
<li>Add Text
</li>
<li>Add Logos
Should've said data-toggle="tab" instead of tab#.
I have this simple modal form done with Bootstap 3, and I have no clue why it's not appearing when I click on the button.
<div id="modal" class="modal hide fade in" style="display: none;">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Some title</h3>
</div>
<div class="modal-body">
<form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
<label>Name:</label>
<input type="text" class="span6">
<label>Email:</label>
<input type="text" class="span6">
<label>Message:</label>
<textarea type="text" class="span12" rows="4"></textarea>
</form>
</div>
<div class="modal-footer">
Send
Cancel
</div>
</div>
And this is the button that should make this modal window appear when clicked:
<p class="text-center">
<a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
Message me
</a>
</p>
It is not much different to the example codes I've seen around the web, but I can't make the modal window to appear.
Any idea why it's not working?
Edit:
This is how I'm including the Bootstrap JS files:
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />
Try removing the class hide from the modal div:
<div id="modal" class="modal fade in" style="display: none;">
You don't have the js file of bootstrap. Those aren't js files but css files of bootstrap. Include this inside your body element just before the closing tag
< /body>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
both css and js files are needed
Just in case somebody else has the "why-won't-this-crazy-thing-work" moment.
I had the same problem, but other modal forms were working.
Finally, I realized that I had server-side code to handle the button click as well as the modal stuff. The server-side code won, unfortunately I didn't have nothing coded in there.
So, check for server-side code.
I have been working with the Twitter Bootstrap on a mini project. I am using 's with it and there is a bit of weird behaviour. I have jQuery which allows me to create new tabs when a button is clicked. The new tab is made active and contains a form. This form displaces the title of the below and I can't find out why. Can anyone help?
Code Snippets:
<section id="builder">
<div class="page-header">
<h1>App Builder. <small>Create your app.</small></h1>
</div>
<div class="span7">
<!-- ===== App Title ===== -->
<div class="control-group">
<label class="control-label" for="appTitle">App Title</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appTitle">
<p class="help-block">Enter the title for your app. It will appear at the top of your app.</p>
</div>
</div>
<!-- ===== App Subtitle ===== -->
<div class="control-group">
<label class="control-label" for="appSubtitle">App Subtitle</label>
<div class="controls">
<input type="text" class="input-xlarge" id="appSubtitle">
<p class="help-block">Enter the subtitle for your app. It will appear below the title.</p>
</div>
</div>
<!-- ===== App Theme ===== -->
<div class="control-group">
<label class="control-label" for="appTheme">App Theme</label>
<div class="controls">
<select id="appTheme">
<option>Dark</option>
<option>Light</option>
</select>
<p class="help-block">Select the theme for your app. You can preview your theme on the right.</p>
</div>
</div>
<!-- ===== App Pages ===== -->
<p>App Pages</p>
<ul class="nav nav-tabs" id="tabHeaders">
<li><i class="icon-plus"></i>Add Page</li>
<!-- Tabs (Created by Javascript) -->
</ul>
<div class="tab-content" id="tabContent">
<!-- Tab Content (Created by Javascript) -->
</div>
</div>
<div class="span4">
<div class="iphonebackground">
<div class="screenbackground"></div>
</div>
</div>
</section>
<section id="preview">
<div class="page-header">
<h1>Preview your App. <small>See your app in it's full glory before you download it.</small></h1>
</div>
</section>
Before adding a new tab:
After adding a new tab:
It looks like the text is being floated around the new tab. Try using clear:left; in the CSS for that text to see if it correctly drops back below the tab.