I am trying to achieve toggle of div using just inline css but its not working. please note that inline css is required no javascript. Thanks guys.
</head>
<body>
<div>
<a id="hide1" href="#hide1" class="hide">+ Expand</a>
<a id="show1" href="#show1" class="show" style="display: none;">- Expand</a>
<div class="details" style="display: none;">
Content goes here.
</div>
</div>
</body>
</html>
Use the summary / details HTML elements.
<details>
<summary>Expand</summary>
Content goes here.
</details>
Use a checkbox instead.
input:not(:checked) + .toggle {
display: none;
}
<span>Show</span><input type="checkbox" />
<div class="toggle">Hello World!</div>
I am trying to find the parent of the span element with label First Name and go up the DOM until i get to the input element with class "mat-input-element"
I have attempted with the following xpath, but did not get the result i needed:
//div/div/span[contains(.,'First Name')]/parent::div[#class='add-users']/lib-text-input-v3/div/mat-form-field/div/div/div[1]/input
Any help would be appreciated. Thanks!
You can try with the below xpath.
//span[normalize-space(.)='First Name']/ancestor::div[#class='input-v3']//input[#class='mat-input-element']
Sample HTML: From jsfiddle
<html><head></head><body>
<div class="add-users">
<lib-text-input-v3 errortext="”Error" a="" valid="" first="" name”="">
<div class="input-v3">
<mat-form-field class="mat-form-field">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<input class="mat-input-element" type="text">
<span class="mat-form-field-label-wrapper">
</span>
</div>
</div>
<div class="mat-form-field-underline>
<span class=" mat-form-field-ripple"="">
</div>
<div class="mat-form-field-subscript-wrapper">
<div class="mat-form-field-hint-wrapper">
<div class="mat-form-field-hint-spacer">
</div>
</div>
</div>
</div>. //closes mat-form-field-wrapper class
</mat-form-field>
<div class="input-v3__label"> // same level as input-v3 class
<div class="input-v3__label--text">
<span class="ng-tns-c11-01">First Name
</span>
</div>
</div>
</div> // closes input-v3 class
</lib-text-input-v3>
<lib-text-input-v3>…..
</lib-text-input-v3></div></body></html>
here is my codepen https://codepen.io/syedsadiqali/full/BwaMEW.
I'm trying to make a Wikipedia viewer project by freecodecamp. everything is working good except I the snippets from the Wikipedia API, the html entities can't be decoded and span tags can't be replaced. I tried many things. help needed, please.
HTML
<div class="container">
<div class="row row1">
<div class="col-md-6 text-center">
<div class="text-center">
<h2 class="text-center">Welcome to <h2><h1><br> Wikipedia Viewer Project <br> </h1><h2>Search Something Random<br>or<br> Enter Value below.</h2>
</div>
<input type="text" id="querybox">
<div>
<button class="btn btn-primary" id="querybutton">Search</button>
<div>
<a class="btn btn-primary" href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Open Random Page</a>
</div>
<div class="data" id="put"></div>
</div>
</div>
<div class="col-md-6">
<div id="target" class="list-group"></div>
<script type="x-tmpl-mustache" id="template">
{{#search}}<h4 class="list-group-item-heading">{{title}}</h4><p class="list-group-item-text">{{{snippet}}}</p>{{/search}}
</script>
</div>
</div>
<div class="row">
</div>
<footer>
<h3 class='text-center'>Made with love by Syed Source Code would be soon available to you on my Github</h3>
</footer>
</div>
CSS
#import url('https://fonts.googleapis.com/css?family=Pacifico');
.row1{
font-family:"Pacifico",sans-serif;
}
.btn{
margin-top:10px;
padding:20px;
font-size:30px;
}
.row{
margin-top:20px;
}
input{
font-family:sans-serif!important;
}
JavaScript
$("#querybutton").on("click",function(){
data=document.getElementById("put"); query=document.getElementById("querybox").value;
url="https://wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=" + query + "&callback=?";
$.getJSON(url,function(json){
var view=json.query;
var template = document.getElementById('template').innerHTML;
Mustache.parse(template);
// render the data into the template
var rendered = Mustache.render(template,view);
//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;
});
});
Result
https://codepen.io/syedsadiqali/full/BwaMEW
as #Paul Abbott commented I needed to use {{{snippet}}} triple mustache to render the data from Object as HTML. thanks for the answer, this answer I'm just writing to close this Question Right Answer was given by #PaulAbbott. thanks again.
Title says all basically. I want the text right next to the slideshow.
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<h2 id="wexford">17 My Street - Some Town, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
H tags have a specific purpose, to act as a header under which other content will fall. To use h tags side by side goes against their intended use (and is invalid html). The span tag does what an H tag does, but is an inline element (display:inline), where a H tag is a block level element (and acts like a div)(display:block). You can change the 'display' property of an H tag's css to do what a span does.
With that in mind, I would actually use 'display:inline-block' in your situation.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1 {
display: inline-block;
}
h2.asCouple {
display: inline-block;
margin-left: 15px;
}
</style>
</head>
<body>
<div>
<h1>Topic - <h2 class="asCouple">Subtopic</h2></h1>
</div>
</body>
</html>
Hope this helps.
You can do it inline when declaring the HTML element, I did something like this:
<h6 style="display: inline">Posted by <h4 style="display: inline">{{.}}</h4></h6>
By doing this, you don't change the style of all <hSOMETHING> elements
<div class="displayBorder">
<div class="displayContainer">
<div class="displayTable">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')"><</div>
<img src="css/img/wexford-1.jpg" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">Location</h2> <br />
<h3>$1,249,999</h3>
<p>Custom Built Home With Every Bell And Whistle !/ Ch Colonial With 6 Generous Bdrms, 2 Master Suites Or Use Lge Area For Office, 5 Full Baths, Wood Floors Thru-Out, Granite Eik W/ Center Isle, Top Appliances, Andersen Windows, Lots Of Details, Full Finished Basement W/ Ose, Full Wet Bar, Theater Tv Area, Playrm, Lots Of Storage, Custom Freeform Salt Pool, Custom Pool House</p>
</div>
</div>
<button class="learn-btn">LEARN MORE</button>
</div>
#Jared Scarito is this what you need??
CSS
.displayContainer{
display:table;
}
.photoContainer,.txt-con{
display:table-cell;
vertical-align:middle;
}
HTML
<div class="displayBorder">
<div class="displayContainer">
<div class="pictureContainer">
<div class="photoContainer">
<div class="switchPhoto" id="switchLeft-wexford" onclick="lastPhoto('wexford-1')">
<</div> <img src="https://i.stack.imgur.com/rhy46.png" id="wexford-image" />
<div class="switchPhoto" id="switchRight-wexford" onclick="nextPhoto('wexford-1')">></div>
</div>
</div>
<div class="txt-con">
<h2 id="wexford">1234 My Street - Sometown, New York</h2>
<h3>$1,249,999</h3>
</div>
</div>
</div>
changed the image to demonstrate
Pretty much the same HTML, added extra div around h3 and h2..
I'm new and i have a question about CSS3 and :empty pseudo-class.
I create a web ajax application. In my page layout I've got a sidebar and i want to hide this if is empty. So i wrote:
#my_sidebar:empty { display:none;}
For display it when isn't empty i wrote
#my_sidebar:not(:empty) { display:block; }
This is working but with chrome the sidebar appear only after one click on the page or on a link. Why?
Can someone help me?
Thanks! (excuse me for my terryfing english!!)
EDIT:
the html page:
<body id='body'>
<!-- Header -->
<header id="top" class="cf">
<div id="branding">
<h1>Project Management</h1>
</div>
<nav id="nav-user">
<ul>
<li><a id="user" href="profilo"><span id="username"></span><img id="avatar" class="avatar"></a></li>
<li><a id="company" href="azienda">Azienda</a></li>
<li><a id="logout" href="logout">Logout</a></li>
</ul>
</nav>
<nav id="nav-main">
<ul class="cf">
<li>
<button id="back" onClick="javascript: history.back();" href="#" />←</button></li>
</ul>
<!--popup con task finiti -->
<div id="task-ended" class="cf">
<div class="triangle-border top">
<div class="clear"></div>
</div>
</div><!--task-ended-->
<!--popup con task finiti -->
</nav>
</header>
<!-- Main Body -->
<div id="container" class="cf">
<div id="loading" style="display:none"><img src="images/loading.gif" /></div>
<div id="my_sidebar" class="sidebar"></div>
<div id="main" class="main"></div>
</div>
<footer class="cf" id="footer">
Mentis Project Management
</footer>
</body>
and css:
.sidebar {
float:right;
width: 36%;
text-align:left;
}
The Chrome bug apparently only happens with the display property, so you can instead set visibility: hidden; to make it invisible and position: absolute; to prevent the space from being reserved. This doesn't require the use of :not(:empty).
As always, whenever you find yourself pushing browsers to their limits, stop and ask yourself if there's a simpler way to do the job. Depending on what you need, simple calls to jQuery's show() and hide() method could work just as well. :)