I have a web aplication , in which i have to specify a new css file to this section :
<section id="loginForm" >
<h2>Connecter à notre application</h2>
#using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>Formulaire de connexion</legend>
<ol>
<li>
#Html.Label("Name")
#Html.TextBox("Name")
</li>
<li>
#Html.Label("Password")
#Html.Password("Password")
</li>
</ol>
<input type="submit" value="Se connecter" />
</fieldset>
}
</section>
For example , the hole View is associated with the css file X and i'd like to associate another Y css file only for this section.
How can i do this?
Scoped CSS is coming, but the support isn't very good yet. Read more here: http://css-tricks.com/saving-the-day-with-scoped-css/ and http://html5doctor.com/the-scoped-attribute/#link
In the meantime, an alternative is to prefix all your selectors in your Y css file with #loginForm. With a preprocessor like SASS or LESS, this is very easy (wrap the file contents once), but becomes very tedious in plain CSS.
Related
Okay .. I want to create a button once it's clicked it allows you to add a photo .. like the input tag of attribute type = "file" .. I've already designed the button shape .. all what is remained is to click on it so a window blows up .. and choose a photo to display in the post box ..
enter image description here
<div class="extras">
<ul class="icons">
<li class="photos">
<i class="fa-solid fa-image">
</i>
</li>
<li class="tag"> <i class="fa-solid fa-user-tag"> </i> </li>
</ul>
<div class="button">
<button>launch</button>
</div>
</div>
here is the element of class photos which I want it to display the window of adding a photo once it's clicked .. exactly like .. just different button style ..
If I understand well, what you have to do is this: first you'll need to add an id to your <li class="photos"> and your <button>launch</button>. And also remove your <i id="up"> component since you'll add it with JavaScript. See the html bellow.
<div class="extras">
<ul class="icons">
<li id="photos-component" class="photos">
<!-- there used to be an <i> tag here! -->
</li>
<li class="tag">
<i class="fa-solid fa-user-tag"> </i>
</li>
</ul>
<div class="button">
<button id="launch-button">launch</button>
</div>
</div>
After adding the ids, you'll need to call a JavaScript file by inserting a <script src="insert-your-file-name.js"></script> at the bottom of your <body>. Probably, you already have done this. If not, do it.
In that file, you'll want to add the following code.
// This constant bellow contains your photos component
const photosComponent = document.getElementById("photos-component");
// This constant bellow contains your launch button
const button = document.getElementById("launch-button");
// This whole chunk of code bellow is a function that will run whenever
// you click the button
button.addEventListener("click", () => {
// Here we create a new empty <input> tag
const fileInput = document.createElement("input");
// Here we add all the attributes for the <input> tag
fileInput.id = "up";
fileInput.type = "file";
fileInput.classList.add("fa-solid fa-image");
// Here we add the input to the photos component
photosComponent.append(fileInput);
// Here we change the style of the button
button.classList.add("insert-button-style");
})
Hopefully it helps. You can always read more about the JavaScript HTML DOM (Document Object Model) by googleing it.
These links might help you in your search:
https://www.w3schools.com/js/js_htmldom.asp
https://www.javascripttutorial.net/javascript-dom/
I have the following web page:
<div id="childcategorylist" class="link-list-container links__listed" data-reactid="7">
<div data-reactid="8">
<strong data-reactid="9">Categories</strong>
</div>
<div data-reactid="10">
<ul id="categoryLink" aria-label="shop by category" data-reactid="11">
<li data-reactid="12">
Contact Lenses
</li>
<li data-reactid="14">
Beauty
</li>
<li data-reactid="16">
Personal Care
</li>
I want to have css selector of href tags under li tag, i.e. for contact lens, beauty and personal-care. How to write it?
I am writing it in the following way:
#childcategorylist li
gives me following output:
['<li class="titleitem" data-reactid="16"><strong data-reactid="17">Categories</strong></li>']
Please help!
I am not a expert in scrapy, but usually html elements should have a .text object.
If not, you might want to use regexp to extract the text between > and < like:
import re
txt = someArraycontainingStrings[0]
x = re.search(">[a-zA-Z]*</", txt)
Maybe that gives you proper results
I have implemented 2 ng-app in single html page and it is not working for second one, Please look into my code and suggest me where I am wrong.
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<p>Name : <input type="text" data-ng-model="name"></p>
<h1>Hello {{name}}</h1>
<p> Name: <input type="text" id="first_name" ng-model="first_name"></p>
<h1 ng-bind="first_name"></h1>
<div ng-init="firstName='jaskaran'" id="firstName"></div>
<p> This is the first name:<span ng-bind="firstName"></span></p>
<p id ="x">
my first calculation {{5+5}}
</p>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController" >
<input type="text" id="firstLast" ng-model="firstLast">
Full Name: {{firstLast}}
</div>
script here
var xApp = angular.module('shoppingCart',[])
xApp.controller ('ShoppingCartController', function($scope) {
}) ;
var app = angular.module('namesList',[])
app.controller('NamesController',function($scope){
$scope.firstLast = "Nitin" ;
});
Visit This URL You Can find the Solution
http://shrestha-manoj.blogspot.in/2014/06/can-angularjs-have-multiple-ng-app.html
only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application. To run multiple applications in an HTML document you must manually bootstrap them using angular.bootstrap instead.
Try this :
angular.bootstrap(document.getElementById("App2"), ['namesList']);
It will bootstrap your second ng-app directive.
If I have an area of a page with different options for filtering the search results (unordered lists with links, checkboxes, selects, etc.). What html5 tag should be used to wrap that filters? A "section" tag, a "nav" tag or something else?
<div id="search-filters"> <!-- This should be a div, a nav, a section? -->
<h3>Price</h3>
<ul>
<li>less than 100</li>
<li>100 - 200</li>
<li>more than 200</li>
</ul>
<h3>Brand</h3>
<ul>
<li>Brand A</li>
<li>Brand B</li>
<li>Brand C</li>
</ul>
...
</div>
<section id="search_results">
...
</section>
You could use the header element:
The header element represents a group of introductory or navigational aids.
Note that the header needs to be in the sectioning element (in your case, section) of the search results:
<section id="search_results">
<h1>Search results</h1>
<header id="search-filters">
<!-- your filters -->
</header>
<article>
<!-- search result 1 -->
</article>
<article>
<!-- search result 2 -->
</article>
</section>
You could include the h1 in the header too, if you like. If you then need a styling hook for the filters, you could use a wrapper div.
If your filters are rather complex, e.g. if you offer many filters, probably with subheadings, you could use a section element inside of the header:
<section id="search_results">
<h1>Search results</h1>
<header id="search-filters">
<section>
<h2>Filter the results</h2>
<!-- your filters -->
</section>
</header>
<article>
<!-- search result 1 -->
</article>
<article>
<!-- search result 2 -->
</article>
</section>
What about:
<nav role="search">
...
</nav>
I know it's not perfect, since..
nav doesn't really state in the standard that it should be used, but it's clearly something that leads you to different pages (which is). There isn't anything better, though you could also use menu, since it can also be seen as a command (1,2).
And it's not really a "search" role, since you said it's filtering what is already searched, but I think it's the closest to it.
I would use something like this in the html:
<form method="get">
Search By Client Name: <input type="search" name="searchText" />
<input type="submit" value="Search" />
</form>
And in the controller, something like this:
// GET: /Clients/
MyContextDB db = new MyContextDB();
public ActionResult Index(string searchText = null)
{
var model =
db.ClientProfiles
.OrderBy(r => r.ClientName)
.Where(r => searchText == null || r.ClientName.StartsWith(searchText))
.Take(2)
.Select(r => new ClientListViewModel {
ClientId = r.ClientId,
ClientName = r.ClientName,
....
});
return View(model);
}
I am trying to output the link in list "li" from json data and pass it to jquery mobile elements. But the link on "li" seem output like regular link (link with blue color instead of properly listview jquery mobile) after I append with jquery, and did not show attribute css for jquery mobile.
Don't know if I explain it correctly, but what am I doing wrong here??
<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
<div align="center">
//some code
</div>
</div><!-- /header -->
<div data-role="content">
<div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-theme="e">
<li>
<h3>North America</h3>
<p>H-D Dealer Charms - USA & Canada.</p>
<ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
</ul>
</li>
<li>
<a href="display.php?state=international" data-transition="slide">
<h3>International</h3>
<p>H-D Dealer Charms - Asia & Europe.</p>
</a>
</li>
<li>
//some code
</li>
<li>
//some code
</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>New Charms</li>
<li>//some code</li>
</ul>
</div><!-- /navbar -->
<script>
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
});
}) ();
</script>
Any idea??
Every time new content is added jQuery Mobile needs to be forced to enhance page markup. It can be done in numerous ways, and if you want to find out more take a look at this ARTICLE, to be more transparent it is my personal blog. Or take a look HERE.
This function should be used:
$('#state-list').listview('refresh');
And code needs to be changed like this:
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
$('#state-list').listview('refresh');
});
}) ();
One more thing to remember, this line must be used inside a $.getJSON but after $.each loop finishes with content appending. In the end one last thing to remember, if possible classic jQuery DOM ready functions should not be used with jQuery Mobile, page events should be used instead, find more about it HERE.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
So after appending the new list items you have to trigger the create event to build the listview. try:
$('ul').listview('refresh');
or
$('ul').trigger('create');
EDIT:
try this inside the $.each() loop:
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>').listview('refresh');
I just added .listview('refresh'); at the end of each append. If the list view is already initialized it should work.