jeudi 30 juin 2016
how to give full center width to search input in navbar?
How to align 2 submit in half panel?
This is in php
<div class='pnl-aln' style='float:right'>
<div style:'float: left; width: 50%'>
<form action = 'Page1.php'>
<input type='submit' class='btn-scelta' value='ACA'>
</form>
</div>
<div style:'float: right; width: 50%'>
<form action = 'Page2.php'>
<input type='submit' class='btn-scelta' value='RUTA'>
</form>
</div>
</div>
While this is css
.pnl-aln{
display: inline-block;
width: 50%;
}
.btn-scelta{
margin-left: 2%;
font-family: url("https://fonts.googleapis.com/css?family=Roboto:700");
font-size: 2vw;
border: solid 3px #000;
background: transparent;
color: #000;
transition: .5s;
}
Those two submit are placed in half panel, I've tried many types of code but nothing has worked. Please help me because I'm getting mad at this and it's at the end of my project :(
How to place 3 different paragraphs next to each other?
In my footer I want to make 3 different sections of paragraphs-at left, middle and right. The 3 paragraphs should sit next to each other, not below each other.
This is how I was trying to do, but I failed to figure it out.
<footer>
<div id="footer_box">
<p id="footer_text_left">
should sit at the left.
</p>
<p id="footer_text_middle">
should sit in the middle.
</p>
<p id="footer_text_right">
should sit at the right.
</p>
</div>
</footer>
.CSS:
#footer_box{
border-top:2px solid #009933;
padding-bottom:75px;
background-color:#3366CC;
}
#footer_text_left{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_middle{
font-size:15px;
color:black;
font-family:Euphemia;
}
#footer_text_right{
font-size:15px;
font-family:Euphemia;
color:black;
}
High-map not displaying properly
Override/Shadow a javascript source with another source
I have an html file as below:
<html>
<head>
<title>abc</title>
</head>
<body>
<p>
abcd
<p>
efgh
<a href = "#" id = "link"> Click me </a>
</body>
<script src = "src1"></script>
<script src = "src2"></script>
</html>
The problem: Javascript from src1 is essential for desired functioning for <p> tags whereas Javascript from src2 is essential for desired functioning for <a> tag. However <a> tag works in desired way only if src2 is present and src1 is absent. Fortunately src2 does not affect <p>. So, I was wondering if its possible to shadow src1 for <a>?
How to display an hidden div on an image with low opacity
Suppose I have an image. I want to display an div on the image with same width and same height of the image when I put the cursor on the image. Background of the div will be black included with opacity .6. AT first Below I included an code, but it is not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.under_menu{
width: 400px;
height: 400px;
background-color: black;
opacity: .5;
position: absolute;
display: none;
}
.image:hover .under_menu{
display: block;
margin-top: -20px;
}
.main_menu{
position: relative;
display: inline-block;
}
</style>
</head>`
<body>
<div class="main_menu">
<img src="com22.jpg" class="image" width="400" height="400" alt="" />
<div class="under_menu"></div>
</div>
</body>
</html>
Create inset window boxshadow border with space between actual window and border
I want to create the white border seen in the image below with CSS. White border that is set 25px inside the window. Iv'e tried to use box-shadow inset however was not able to create the space between the edge of the window.
I used this css:
border: 3px solid white; //took this out but still no luck
box-shadow: inset 0 0 0 5px #FFFFFF;
I also tried without the normal border as well.
I think I can create an overlay div that has a padding or margin and give it a border, but the problem is the content needs to be scrollable and clickable below it.
The goal: The white box just above the icons.
Get the Weight listed in Prestashop home page
How do I get the CSS font-size in javascript? [duplicate]
This question already has an answer here:
- How To Get Font Size in HTML 5 answers
I have tried:
document.getElementById("foo").style.fontSize
However that returns nothing. My CSS is defined in the same document and not a separate stylesheet. I have also tried this:
var el = document.getElementById("content");
var style = window.getComputedStyle(el, null).getPropertyValue("font-size");
var fontSize = parseFloat(style);
el.style.fontSize = (fontSize + 1) + "px";
but that doesn't work.
This is the html in question:
<p contenteditable="true" id="content">Write here. Seriously, try it.</p>
And this is the css
#content {
line-height: 30px;
margin-top: 22px;
min-height: 90%;
display: block;
padding: 0 20px 0 20px;
font-size:15px;
}
How we can clone any HTML element using drag then drop it in another column (only in that column not outside from it)
I am doing work on drag and drop in HTML 5. Someone suggested to me to use jquery-ui because they have lot of stuff already implemented.
I am able to drag and drop any HTML element only in one column right now, but I want to be able to clone any HTML element from one column to another column. I want the original element to stay in its origin column as well.
This concept is shown in this example.
In this example, "test" div can be cloned and dropped anywhere, but I to be able to drop it only in the "drop" column - it can be dropped anywhere in this column.
After dropping, I also want to resize it, change the position, save the properties such as size, width, height, etc in a file or Database.
Dynamically create and append tab spave in Javascript
I am trying to dynamically create a form and I need to append a Tab space between two elements. The only issue I guess with this is the tag(createElement(...)) that needs to be placed. Also please note that I have omitted many other elements that the form will be holding
function createStreamForm()
{
$(".toolbox-titlex").show();
$(".panel").show();
var Streamtype = document.createElement("div");
var br = document.createElement("br");
var streamlbl = document.createElement("label");
var streamtypelbl = document.createElement("label");
var PredefStreamdiv = document.createElement("div");
var tabspace = document.createElement("label");
Streamtype.type = "text";
Streamtype.id="Streamtype";
Streamtype.className = "streamType";
streamlbl.className = "lblstreamProp";
streamlbl.innerHTML = "Stream: ";
PredefStreamdiv.id = "PredefinedStream";
tabspace.innerHTML = " ";
lot.appendChild(Streamtype);
lot.appendChild(tabspace);
lot.appendChild(streamlbl);
lot.appendChild(streamtypelbl);
lot.appendChild(br);
lot.appendChild(PredefStreamdiv);
createattr();
$(".streamType").append(showStreamType());
$(".queryPanel").
hide();
}
Here I've tried using   in place of a tabspace but it doesn't work.
How to unbind an keyboard short cut events in angular js
I created an angular directive that binds the keyboard short cut. However, once this is bind, it keeps the binding for all other divs. But i have attached only to one div. How do i unbind it after it executes and re bind when the user clicks within that div. ex:
angular.module('Dummy').directive('keypressEvents',
function ($document, $rootScope) {
return {
restrict: 'A',
link: function () {
$document.bind('keydown', function (e) {
if ((e.which == '115' || e.which == '83' ) && (e.ctrlKey || e.metaKey)){
$rootScope.$broadcast('Ctrl+s');
}
});
}
} });
in controller
$rootScope.$on('Ctrl+s', function (e) {
$scope.$apply(function () {
$scope.doDummyAction();
});
});
in html
<div keypress-events>this is a div that binds keyboard shortcut</div>
<div>Another div which doesn't need a short cut key</div>
Appreciate any suggestions.
Foundation: Scale columns of grid to full width
I have a row where i don't need the 12 columns of foundation grid. Is it possible to scale these columns to full width with a margin between columns calculated dynamically (not with class small/medium/large-offset) by foundation, so that it fit's to the screen size?
This is my coding, where columns are directly next to each other:
<div class="row">
<div class="large-2 medium-2 small-2 left white centered" >
//Content
</div>
<div class="large-1 medium-1 small-1 left white centered" >
//Content
</div>
<div class="large-2 medium-2 small-2 left white centered" >
//content
</div>
<div class="large-1 medium-1 small-1 left white centered" >
<//content
</div>
<div class="large-1 medium-1 small-1 left white centered" >
//content
</div>
<div class="large-1 medium-1 small-1 left white centered" >
//content
</div>
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
I have a website here.
Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.
In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.
Even if I set the viewport to a specific width in the <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
The site expands to the 1100px but still has the whitespace beyond the 1100.
What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
Full height content block width sticky footer
Problem is trivial (I am sure there must be plenty of solutions, but can't find proper one myself (honestly))
I need simple header->content->footer page, like this
<div class="container">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
Where header footer is sticky to botom (not fixed position, if there is no content it's on bottom, if there is, It must move depending on content block height.
What I've tried
header and footer are absolute with top and bottom properties, content have padding from top and bottom same as header and footer height but it doesn't work as I want to.
Jsfiddle example: https://jsfiddle.net/xwjhn7ej/
Change md-tab-group body min height to 0 in Angular 2 Material
Here is a plunker demo that uses Angular 2 Material md-tab-group component.
Basically, this
<md-tab-group>
<md-tab>
<template md-tab-label>Tab</template>
<template md-tab-content>
<md-content class="md-padding">
<p>200 px height</p>
</md-content>
</template>
</md-tab>
</md-tab-group>
renders to a tab that has a body with 200px height. It uses flex layout, and I cannot find from the sources how to change minimum height. Actually, this style is listed for md-tab-group:
[_nghost-vvf-2] {
display: flex;
flex-direction: column;
font-family: Roboto,"Helvetica Neue",sans-serif;
min-height: 248px;
}
How can minimum height be restored to 0 for md-tab-group properly? And where did this min-height come from?
make a div fold out to show content
I am trying to achieve the same effect here so when you hover on the div it folds out and shows the content, but I cannot figure out how to do this.
So far I am able to make the content slide in by using the following code. Code underneath and jsfiddle can be seen here.
html
<div class="artist artist-1"></div>
<div id="artist-text">Hi there</div>
css
.artist-1:hover + #artist-text {
display: block;
}
#artist-text {
display: none;
background-color: #000000;
width: 130px;
padding: 10px;
position: absolute;
left: 50%;
top: 60%;
animation-duration: 1s;
animation-name: slideLeft;
}
.artist {
height: 100px;
width: 100px;
}
.artist-1 {
background-color: red;
position: absolute;
left: 20%;
top: 40%;
}
@keyframes slideLeft {
from {
margin-left: 100%;
width: 100%;
}
to {
margin-left: 0%;
width: 100%;
}
}
How to get alert when Ichange dropdown options using angularjs
This is my dropddown menu, when I change the option will get alert its working, but when i select again on the same option i didnt get alert.How it posiible
index.html
<body ng-app="demoApp">
<div ng-controller="DemoController">
<div>
<select ng-model="currentlySelected" ng-options="opt as opt.label for opt in options" ng-change="logResult()">
</select>
The value selected is {{ currentlySelected.value }}.
</div>
</div>
</body>
app.js
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 }
{ label: 'three', value: 3 }
{ label: 'four', value: 4 }
{ label: 'five', value: 5 }
];
$scope.currentlySelected = $scope.options[1];
$scope.logResult = function() {
alert($scope.currentlySelected);
}
});
What I expect is if I select "two" twice i need to alert twice. Is this possible or should I be using a different directive for this?
Setting submit form button with a background image?
i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?
HTML
<div id="headerSearch">
<form method="post" action="Test.php">
<div id="headerSearchBar">
<input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
</div>
<div id="headerSearchBtn">
<input class="btnSearch" id="button" name="submit" type="submit" value="">
</div>
</form>
</div>
CSS
#headerSearch{
float:right;
width:80%;
height:80px;
}
#headerSearchBar{
float:left;
width:90%;
height:80px;
}
.tbSearch{
height:25px;
width:95%;
margin-top:27.5px;
margin-left:2%;
margin-right:0;
margin-bottom:0
}
#headerSearchBtn{
float:right;
width:10%;
height:80px;
text-align:center;
}
.btnSearch{
background-image:url(../IMAGES/btnSearch.svg) no-repeat;
width:25px;
height:25px;
margin-top:27.5px;
}
Accessing a Web page by ip address fails, though success with domain name
I built a Universal Windows application that includes Web pages from a remote server (in the local network). Whenever I try to do so, it succeeds when I use a regular domain name as resource url, but I only get a blank page when I use the local ip address. I did add the ip address to the allowed domains, as I did with the regular domain name (e.g., I added www.google.com and 123.456.78.90), and I checked whether it was only for local network up addresses of fot all ip addresses, and the problem shows up with all ip addresses.
I'm quite stuck now, as I can only access the local server by ip, and I do need to include these pages from that server. Does anyone know this problem, and has some solution? Am I doing something wrong with the allowed domains? Am I missing some trivial setting?
Cheers, Dennis
How can I add the thumbnail image to my sidebar in Woocommerce?
I'm using Woocommerce widgets to add the category list for my products in the sidebar of my website. Currently the categories are listed as worded lists. I would like the thumbnail image for each category to also be shown beside the word. I've managed to get the write the code below but it shows the category thumbnail in the centre of the page where the products are listed but I want the thumbnails in the sidebar beside the words. Can anybody help me figure out what I'm missing to achieve this? Thank you in advance!
HTML:
add_action( 'woocommerce_archive_description', 'woocommerce_category_image', 2 );
function woocommerce_category_image() {
global $wp_query;
$cat = $wp_query->get_queried_object();
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if ( $image ) {
echo '<img src="' . $image . '" alt="" />';
}
}
How to put some divs in a row?
I'm trying to put two divs without a linebreak between them.
this is the html:
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
#header {
background-color: #13768a;
width: 962px;
height: 207px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
}
#left {
width:712px;
height: 207px;
}
#slideshow {
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
the problem is that I want it to look like this: How I want it to look like
But it looks like this: How it looks like
JavaScript - Image gallery - Slide left and right
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Image floating right that is further in HTML structure than text in paragraphs
How to create small Jquery Plugin to change list to drop down when screen size changes from desktop to phone screen
I am trying to create a custom Jquery Plugin to replace the list with Drop down Menu when size changes to phone.. Not able to proceed further...
[JSfiddle link][1]https://jsfiddle.net/Shivanigupta/6o5fw66f/16/
<nav>
<select class="tabMenu">
<option value="tab1Content">Tab1</option>
<option value="tab2Content">Tab2</option>
<option value="tab3Content">Tab3</option>
</select>
<ul id="tabContent">
<li class='active'><a href='#tab1Content'>Tab1</a></li>
<li><a href='#tab2Content'>Tab2</a></li>
<li><a href='#tab3Content'>Tab3</a></li>
</ul>
</nav>
Stacked collapsible navbar in bootstrap 4
I would like to create a collapsible navbar. Everything works, but the nav items aren't stacked under each other like it should be. They are horizontally next to each other.
Code:
<nav class="navbar navbar-light bg-faded" role="navigation">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="collapsing-navbar">
<a class="navbar-brand" href="/">Logo</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="/messages" class="nav-link">Messages</a>
</li>
<li class="nav-item">
<a href="/logout" class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
Screenshot:
mercredi 29 juin 2016
Plotting graph using python and dispaying it using HTML
Silverstripe better form looking on templates
I have a designed template on photoshop from a client. My interrogation... When I saw the template is: Can I put 2 fields side-by-side? I want to have f_firstname and f_lastname on one row... Is there anyway to inject tags or piece of code with classes like ex: div="column1of2" $field_here close div to have a 2 columns for 2 fields?
Actually, code generate each fields are on separates rows. That's not very pretty. Possible?
I have this code :
private static $allowed_actions = array(
'FormInfolettre'
);
public function FormInfolettre() {
$fields = new FieldList(
EmailField::create('f_email', 'Votre courriel'),
TextField::create('f_firstname', 'Votre prénom'),
TextField::create('f_lastname', 'Votre nom'),
TextField::create('f_message', 'Votremessage'),
);
$actions = new FieldList(
FormAction::create("Soumettre")->setTitle("Soumettre")
);
$required = new RequiredFields(
array(
'f_email',
'f_firstname',
'f_lastname',
'f_message',
));
$form = new Form($this, 'FormInfolettre', $fields, $actions, $required);
return $form;
}
How to get "mix-blend-mode" to work in this code
I am trying to modify a fork from codepen to blend three animated circles (cyan, magenta, yellow) using mix-blend-mode: multiply; to achieve this result where the overlay of all three colours is black.
As you can see on the codepen link, the blend mode does not work. Upon further research, I came across that mix-blend-mode needs to be within <svg> in order for it to work. As I am not a coder -I just understand enough to get myself into trouble- can you please take a look at the code and point out to me why the blend mode does not work as expected?
I have commented out the animation as I was trying to get the blending to work before fine tuning the animation.
Aligning div with background image of parent div
I have two div's, one over the other. The bottom div has a background image with two columns, one at 40% width and the other 60%
.container {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAC7gAAAABAQMAAAB0GXF9AAAABlBMVEX////09PQtDxrOAAAAD0lEQVQY02P4PygBw3AHAG6mlWu52WYpAAAAAElFTkSuQmCC');
background-repeat: repeat-y;
background-position: 40% 0;
}
The top div has a max width at 600px and inside two div columns, one at 40% width and the other 60%
.container .row .col-1, .container .row .col-2 {
display: inline-block;
float: left;
}
.container .row .col-1 {
width: 40%;
background-color: #00ffff;
}
.container .row .col-2 {
width: 60%;
background-color: #ff0000;
}
If the browsers window width is at 600px or less, the background image and div column align perfectly but any wider the two begin to misalign.
Is it possible to align the top and bottom div columns?
Please see this JSFiddle
Thanks for any help
Include different spacing between lines css
I’m new to using css and I’m trying to create a page with a title, date, and description. I can’t figure out the best way to include different amounts of padding between the different sections. I want the date to come immediately underneath the title and then to have some space between the date and description, but right now a larger amount of space appears between the title and date and less space between the date and description. I am using nunjucks as a template. Any help would be appreciated!
From Mainpage.nunjucks:
<div class="title">
{{ options.title }}
</div>
<div class="date">
Created {{ options.date }}
</div>
<div class="subtitle">
{{ options.description }}
</div>
From common.scss:
.Mainpage {
padding: 20px 0;
div {
padding: 5px 0;
}
.subtitle {
font-size: 12px;
font-weight: normal;
}
.date {
color: #aaa;
font-size: 11px;
}
}
Include some graphs in a unique single page
I have 3 directories plot2, plot3 and plot4 containing several files that 3 different chart made using d3.
The plot2, plot3 and plot4 directories structure is always the same:
plot2
|_ index.html
|_ js
|_ script.js
|_ queue.v1.min.js
|_ ...other files...
|_ syle
|_ style.css
|_ data
|_ ...other files...
I then created a plot1 directory that contains a page (html/js/css) whose purpose is to contain the plot2, plot3 and plot4 graphs.
That is, I would do something like PLUNKER
I don't want to simply copy the 3 graphics code in the new file because it does not seem the most efficient way and it would be too complicated to handle (I've just tried).
How can I do then?
CSS perspective bug under firefox
I am having issues with the css "transform" property under firefox ( latest version + other versions tested )
Here is the transform applied :
-moz-transform: perspective(2rem) rotateX(15deg) scaleY(1);
-o-transform: perspective(2rem) rotateX(15deg) scaleY(1);
-ms-transform: perspective(2rem) rotateX(15deg) scaleY(1);
-webkit-transform: perspective(2rem) rotateX(15deg) scaleY(1);
transform: perspective(2rem) rotateX(15deg) scaleY(1);
And the active element should have
-moz-transform: perspective(0rem) rotateX(15deg) scaleY(1);
-o-transform: perspective(0rem) rotateX(15deg) scaleY(1);
-ms-transform: perspective(0rem) rotateX(15deg) scaleY(1);
-webkit-transform: perspective(0rem) rotateX(15deg) scaleY(1);
transform: perspective(0rem) rotateX(15deg) scaleY(1);
Here is a JSfiddle to test under chrome, and under firefox. The "active" element does get a perspective change under chrome & others, while on firefox, it is not replaced.
I searched for a similar case but it doesn't seem to have occured to someone else.
hreflang tags for Europe
I'd always understood that, because there is no en-EU IETF tag, to target Europe I'd have to either use en or list out an hreflang for each country within Europe.
Looking at the source of Think With Google, I noticed the following:
<link rel="alternate" href="//thinkwithgoogle.com/intl/es-419/" hreflang="es-419" />
Which appears to use a UN M.49 code to indicate Spanish for the Latin America and Caribbean region.
The UN M.49 Wikipedia page also lists a code for Europe - 150.
Does it follow that I could have the following hreflang tag to indicate English for the European market?
<link rel="alternate" href="//example.com/intl/en-150/" hreflang="en-150" />
Please help me to make some changes in my hexagonal shape
I just want to make some changes in my hexagonal shape From this shape to To this shape
Thank you,
This is the code
<html>
<head>
<title></title>
</head>
<style type="text/css">
svg{
width:30%;
margin:0 auto;
}
#hex{
stroke-width:1;
stroke: #2f1522;
}
</style>
<body>
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
</pattern>
</defs>
<polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>
</body>
</htmlWeb comic aggregator RSS feed general questions?
I am trying to create a web comic aggregation website using HTML 5, CSS 3, and JavaScript. I would like users to be able to view comics of different dates from different websites all in one place. After some research, it seems like I'm probably going to need to use an RSS feed to accomplish this. However, I don't fully understand the capabilities and usage of an RSS feed.
First, would it be possible to pull images from comic websites in an automated and orderly fashion using an RSS feed? Or would I need to use something else? Or would it not be possible at all? If it is possible with an RSS feed, I'm also confused somewhat about the general implementation. Would the code for the feed be in HTML, or JavaScript, or both? Would I need to use existing libraries and or APIs? Is their existing code with a similar enough function that I could use it as a starting point?
Thanks
Reset checkbox checked state go back from history
In the following example, I use checkbox for making a pure CSS dropdown navigation, also available in this jsFiddle example.
Open that fiddle, click "Menu", click "Link 1", and click the "Back" button on the browser toolbar, as you can see the checkbox remains checked, so the navigation is still open.
My question is - would it be possible to reset that checkbox to unchecked automatically when going back from the browser history? Any suggestions please? Do I need to use Javascript/jQuery?
HTML
<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
<ul>
<li><a href="//example.com">Link 1</a></li>
</ul>
</nav>
CSS
#n {
display: none;
}
#m:checked ~ #n {
display: block;
}
Keep scroll position of a DIV after a FORM submit using session var or CSS
I have a DIV in a page that has a vertical scroll. Inside that DIV I have a lot of rows that contain a FORM with a submit button.
<div>
<form>text1 <input type=submit></form><BR />
<form>text2 <input type=submit></form><BR />
<form>text3 <input type=submit></form><BR />
[...]
<form>text99 <input type=submit></form><BR />
</div>
What I want is that after one clicks one of that submit buttons the div should jump to the scroll position it was before. Right now it jumps to position 1 what is very inconvenient. The page is not using JavaScript at all.
Is there a way to do it with CSS or HTML/CSS?
or maybe using session variables(NOT cookies)?
Bug with CSS-Perspective on Element and Smooth Scrolling with JavaScript
I'm having a strange problem.
- I want to build a website which has a perspective set to 1500px.
- It's a one-page website, so I added a smooth scrolling script.
But the problem is, that it doesn't work correctly... If i put off the perspective, everything works fine? What could I do to get it to work?
Here's my code...
.page-container{
position: relative;
perspective: 1500px;
background: $bg-color--first;
width: 100%;
height: 100%;
}
And the smooth scrolling
function smoothScroll (duration) {
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
removeHamburger();
console.log(target.offset().top);
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, duration);
}
});
}
My content is inside the page container, which is a sibling of my off-canvas navigation.
EDIT:
It doesn't scroll to the right position... It scrolls, but not to the section with the ID...
Why is the document height equal to window inner height + pageYoffset?
I am trying to detect when an user has scroll to the very bottom of the page.
The solution that I end up with is the following
var windowHeight = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
var body = document.body, html = document.documentElement;
var docHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
var windowBottom = windowHeight + window.pageYOffset;
if (windowBottom >= docHeight) {
// Bottom is reached
}
I am confused why this works
From the documentation, innerheight is the height of the view portal, and pageYoffset is the amount of scroll that we make.
So in order to detect scroll to bottom, shouldn't I check if pageYOffset >= documentHeight ?
Why do I have to add innerheight?
Align vertically input elements in div
I've made a search on SO to know how can I align vertically input elements in a div. This div is inside a form. Most of questions, form elements have a lot of <div>'s for each element or a <br> tag for that.
Vertically aligning input elements
I've made a fiddle with this CSS:
.fillform{
position: relative;
width: 100%;
height: 33%;
bottom: 0;
background: rgba(225, 43, 50, 1.0);
}
.fillform div{
position: absolute;
float: left;
width: 100%;
height: 200px;
box-sizing: border-box;
border: 2px solid rgba(0,0, 255, 1.0);
}
.fillform div input{
float: left;
display: inline-block;
border: 2px solid rgba(255, 0, 0, 1.0);
box-sizing: border-box;
vertical-align: middle;
}
Input elements can't be aligned vertically and have margins?
EDIT: I'll not use table or display: table-cell;
How to properly use Bootstrap 3 grid property
I am using Bootstrap 3 in few of my projects, especially the container-fluid class to make my page to display properly in all devices automatically. I know the following regarding the col-xx class: xs for < 768px, sm for >- 768px, md >= 992px and lg for >= 1200px. Let us say I have the following code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
Content 1
</div>
<div class="col-sm-8">
Content 2
</div>
</div>
</div>
I believe in smart phones both Content 1 and 2 will occupy full screen and In all other devices Content 1 will occupy 4 columns and Content 2 will occupy 8 columns. If so, what is the need for md and lg? Probably I don't understand the concept correctly. Instead, should I use class="col-sm-2 col-md-2 col-lg-2" and class="col-sm-8 col-md-8 col-lg-8" in both the div's so that it will work fine in all devices?
Thanks
vertical (instead of horizontal) sub-menus in main-menu (only CSS)
Please see picture
We usually use this CSS style float: left; to create horizontal sub-menu but I need to make a main-menu fixed height and vertical sub-menus.
Besides, I want the sub-menus to be automatically organized in columns containing 6 items each.
If removed float: left; the sub-menus are display vertically but I can't organized them in columns with fixed number of items.
Please be attention that sub-menus are not static and will be create automatically also I use bootstrap grid system too!
Menu will be created with this HTML Code:
<ul class="level1">
<li class="level2 nav-1-2-1">item1</li>
<li class="level2 nav-1-2-2">item2</li>
....
....
</ul>
vertical-align property not working on google chrome
<html>
<head>
<style>
table,td {border:1px solid black ;}
table {width : 80% ;height:80%;}
.top {vertical-align:top};
.center {vertical-align: middle};
.bottom {vertical-align: bottom};
</style>
</head>
<body>
<table>
<tbody>
<tr><td class = "top">1</td><td class = "top" "left">2</td><td class = "top" "left">3</td></tr>
<tr><td class = "center" >4</td><td class = "center">5</td><td class = "center">6</td></tr>
<tr><td class = "bottom">7</td><td class = "bottom">8</td><td class = "bottom">9</td></tr>
</tbody>
</table>
</body>
</html>
Line number 8 ie .bottom {vertical-align: bottom}; is working perfectly fine in internet explorer 8 but it does not work on google chrome even though i have the latest version.
How to centre dialog without flex or transform
Hi I'm trying to create a modal dialog. I need to centre it vertically and horizontally. Unfortunately I can't use flex or transform because this needs to work when viewed on Android 4.2.
I have found solutions that work by setting the width and height of the dialog. I can't use these methods either though because the dialog message will be variable so some times it might span multiple lines and the dialog will need to be bigger.
Anyone know how to do this?
My code example below shows what I have so far which is great apart from the fact the dialog isn't centered.
.modal {
background: rgba(0,0,0,.6);
top: 0;
left: 0;
right: 0;
bottom: 0;
position:fixed;
}
.modal-dialog {
background-color:#fff;
display:inline-block;
padding:1em;
border-radius: 5px;
}
.message {
}<div class="modal">
<div class="modal-dialog">
<p class="message">Your pin has been saved</p>
<button>Ok</button>
</div>
</div>How to implement JS from HTML to WordPress?
Recently, I'm really interested in building WordPress template. I started doing it, but I am really stuck now. The thing is, i have HTML file of my frontpage (index.html), and the CSS and JS all in their folders. Now, I can't seem to find a way to make the JS work on WordPress platofrm, like its working on HTML.
I only want to make that menu work, don't mind the other bugs.
http://brainstorm.comoj.com/ -- HTML
http://bsarafimov21.byethost16.com/ -- WordPress
Here is the code i want to transfer from HTML to WordPress:
<script type="text/javascript">
$(document).ready(function () {
var trigger = $('.hamburger')
, overlay = $('.overlay')
, isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>
CSS live editing - Play framework
i have made a webpage and now it is "feature-complete". As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing? What are other people, using Play framework (or other templating systems) doing?
Thank you!
How to implement cookie in profile picture uploading?
I have a problem figuring this out. How to implement cookie in processing uploaded picture name ?
I have 2 files :
index.php (where you can set your profile picture).
<form action="setPicture.php" method="post" enctype="multipart/form-data" >
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
setPicture.php
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
If a user upload's a profile picture it will be saved in data/img/admin , i must use that source to save it inside the cookie and then get redirected to the main page index.php with the profile picture is set .
Can someone helps me to understand the implementation ?
Here is the complete code of my work. https://jsfiddle.net/u5c4sz6u/1/
How can I split code-blocks into a list?
I would like to split the contents of a CSS file into code blocks and push each block into a list using Python 3.5.
Given this CSS:
h1 {color: #333, background-color: transparent}
h2 {
font-weight:300
}
h3
{
font-weight: 200
}
Straight away we can tell that it has multiple styles and / or types of indentation meaning the CSS has to be tidied to get this:
h1 {
color: #333,background-color: transparent;
}
h2 {
font-weight: 300;
}
h3 {
font-weight: 200;
}
How can I use Python to read the tidied string of CSS and push every block inside it into a Python list like this:
styles = [
"h1 {n color: #333,background-color: transparent;n}",
"h2 {n font-weight: 300;n}",
"h3 {n font-weight: 200;n}"
]
I would also like to point out that RegExp is not really my forte and I'm not quite sure what RegEx to use, but I was thinking that I could use RegExp & [].split(...); together to achieve this.
Possibly even use RegExp to eliminate the need to tidy the stylesheet before splitting the code-blocks in it.
I've been researching this question but that did not help either.
Radio buttons updating a database deletes the entry?
so I'm creating a small form where you can update the values of some fields pulled from a database.
Two of the fields I have however are acting wrong, when the page loads they display the information correctly but when you press 'submit' the fields in the MySQL table go blank. All the other fields update correctly including a checkbox, but not these two radio buttons.
Here's the code for it, I'm sorry to be asking this but does anyone see the error? I'm rather new with PHP so I'm not sure what to look for.
Snippet of the PHP Code (I can post the full code of it, but it's long):
<?php
if(isset($_POST['submit'])) {
$mbr=$_POST['mbr'];
$rec=$_POST['rec'];
$update = $dbconnect->query("UPDATE testing SET mbr='$mbr', rec='$rec'");
}
?>
HTML Code for the 2 radio buttons:
<input type="radio" name="mbr" <?php echo $upChecked; ?>>Up <input type="radio" name="mbr" <?php echo $downChecked; ?>>Down
<input type="radio" name="rec" <?php echo $yesChecked; ?>>Yes <input type="radio" name="rec" <?php echo $noChecked; ?>>No
Google Maps API on Squarespace
I'm using Squarespace to build my website and want to insert a custom map from google maps javascript api. I've already gotten google api key.
I've followed steps as below :
What I'm trying to archive is just to show a google map on my web.
Step 1: Insert a embed block for html
<div id="map_canvas"></div>
Step 2: insert javascript in page header
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=my-key&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Step 3 : in custom css section
#map_canvas
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px
}
But the codes I put on Squarespace didn't work. How should I do? Here the link to my webpage on SquareSpace
Thanks!!
mardi 28 juin 2016
Angular instantiate module error
Please help to identify, what is wrong in below angular Hello World! first program.
<html>
<head>
<script type="text/javascript" language="javascript" src="Scripts/angular.js" />
<script type="text/javascript" language="javascript" src="Scripts/angular-resource.js" />
<script type="text/javascript" language="javascript" src="Scripts/angular-route.js" />
<script type="text/javascript" language="javascript" src="Scripts/angular-cookies.js" />
<script type="text/javascript" language="javascript" src="Scripts/angular-sanitize.js" />
<script type="text/javascript" language="javascript">
funtion Student($scope){
$scope.Name= 'Akshay';
$scope.City: 'Mumbai';
};
var app = angular.module("myApp");
app.controller("Student", Student)
</script>
</head>
<body ng-app="myApp">
<form>
<div id="dvStudent" ng-controller="Student">
Name: <input type="text" name="txtStudentName" id="txtStudentName" ng-model="Name" />
City: <input type="text" name="txtStudentCity" id="txtStudentCity" ng-model="City" />
<input type="button" name="btnSave" id="btnStudentSave" value="Save" /> <input type="reset" name="btnReset" id="btnStudentReset" value="Reset" />
<br />
You have inputed Name: {{Name}} & City: {{City}}
</div>
</form>
</body>
</html>SASS @for looping animation issue
I am trying to fade in a series of list items one after each other going from not visible on the page to visible but having trouble. The list items are visible on the page upon load and then fade in as the css animation is programmed to do. How can i hide the list elements first and then have them fade in one by one?
@keyframes foamy-fade {
0% {opacity:0}
100% {opacity:1}
}
li {
background:#16a085;
color:#fff;
display:inline-block;
font-family: lato;
list-style: none;
padding:10px 20px 14px 20px;
text-align: center;
}
@for $i from 1 through 10 {
li.item-#{$i} {
animation-name:foamy-fade;
animation-iteration-count: 1;
animation-delay: 0.1s + $i / 7;
animation-duration: 0.5s;
animation-timing-function: linear;
}
}
<head>
<link rel="stylesheet" href="sass/main.css">
</head>
<body>
<ul>
<li class="item-1">Home</li>
<li class="item-2">About</li>
<li class="item-3">Gallery</li>
<li class="item-4">Contact</li>
<li class="item-5">Shop</li>
<li class="item-6">Help</li>
<li class="item-7">Cart</li>
<li class="item-8">Checkout</li>
<li class="item-9">Account</li>
<li class="item-10">Login</li>
</ul>
</body>
How to make flag (using flag-icon-css) fill table cell?
I'm using flag-icon-css on a site.
Here is the generated HTML table row:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/css/flag-icon.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th class="text-center">Location</th>
<th class="text-center">Number</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center"><span class="flag-icon flag-icon-us"></span></td>
<td class="text-center"><a class="btn btn-primary" href="/view?+16466635449">(646) 663-5449</a></td>
</tr>
</tbody>
</table>Here is a screenshot:
How can I make the flag larger so it looks more normal, according to the flag-icon-css it should automatically behave in this way?
Looking for a solution without using custom CSS.
This site is using Bootstrap.
Transitioning from right to left
I have a website where I need to move some text from right side of the screen to the left. The text is ever changing in length so I can't just hard code a width to achieve what I want.
I have tried doing transitioning but when I go right to left it stops working. I have written a simple jsfiddle to demonstrate my problem and how I tried to solve it. The first div shows how it should work, however I need the text to align to left instead of right (text-align property will not work with my full code). The second div shows you the actual result of what happens when I do transition to left.
https://jsfiddle.net/h12wrm1n/
$("#right").on("click", function () {
$("#right").toggleClass("active");
});
$("#right2").on("click", function () {
$("#right2").toggleClass("active");
});
.right, .right2{
width: 300px;
position: absolute;
right: 20px;
transition: .5s
}
.right2{
top: 100px;
}
.right.active{
right: 200px;
}
.right2.active{
left: 20px
}
<div id="right" class="right">This is some text</div>
<div id="right2" class="right2">This is some text</div>
How can I have it transition from right to left if I don't know the width of my text? Also please keep in mind that the page is responsive.
Determine when a percentage of a child container is in view in a scrolling parent container
I've been playing around with this on paper for an hour or two now but seem to be getting a bit stuck. Given the scenario where I have a parent container which is 100% wide (fits to it's parent width which can be any size in pixels) that contains child containers that are a percentage of it's size wide (for this example 90%), how do I determine when a child container is a percentage amount in view (say 80%)? The end result of this is to determine what child container you're currently at, say 1/4 or 3/4 etc. The amount of child containers is variable, it may sometimes be 1, it may be 100.
The child containers width of it's parent can vary, but they will always be the same for every child, for example, all 90% of the parent container, or all 100% width.
I've drawn a rough diagram to hopefully make this a bit easier to understand.
So in the example image above, we'd currently be at slide 1 of 3. But if we scrolled to the right and 80% of the green container was now in view, we'd be on slide 2 of 3 etc. The black container in this case being the parent.
The resulting mathematical solution will be implemented in JavaScript.
How to prevent Twitter Bootstrap changing margins as width of page is extended
I was practising with the Bootstrap 3 css. I planed on having a fixed footer and a fixed navigation bar on my webpage. So to do this I used margins of 5% to make the content in the middle of my page to not be covered by the footer or header. To format the text I am using the container class which comes with bootstrap. This can be seen in the picture below.
This looked as it should. However I soon discovered that when the width of the page is expanded it increases the margin size. Like in the picture shown below.
So is there a way to limit how much the margins can extend on the container class in bootstrap. For example something similar too
.addThisClassToTagWithClassContainer {
max-margin-top:5%;
max-margin-bottom:5%;
max-margin-left:5%;
max-margin-right:5%;
}
There is a copy of the files here if you believe this is a coding error that I have made.
Division not showing! Why? [duplicate]
This question already has an answer here:
- Basic height percentage 3 answers
So i have been working on making a website for me and my friends, and until now i have made the menu bar, and a communication space ( with <div>s). But I don't seem to make the second div to show up. Where is my problem? Why doesn't it show up?
Here's my code:
#MenuBar {
width: 100%;
height: 10%;
background-color: blue;
border-radius: 30px;
position: center;
display: fixed;
}
body {
background-color: black;
background-repeat: no-repeat;
}
#MenuTabs {
width: 75%;
height: 75%;
color: white;
position: center;
}
#Messenger {
width: 50%;
height: 50%;
background-color: white;
display: fixed;
}<!-- The menu tab -->
<div id="MenuBar">
<table id="MenuTabs" cellspacing="1%" align="center">
<tr>
<td>Home</td>
<td>Lessons</td>
<td>Playground</td>
<td>About</td>
</tr>
</table>
</div>
<!-- Communication Tab-->
<div id="Messenger"></div>As you can see, it only shows the menu bar, but it doesnt show the white-background div. Can you please help me with that?
Highscoretable, changing firebase results in strange HTML
I´m trying to make a highscore table for a webgame with javascript and firebase. I was beginning with this:
<script language="javascript" type="text/javascript">
var scoreFireRef = new Firebase("https://webgame.firebaseio.com/scores");
scoreFireRef.on('value', function(snapshot) {
var scName= snapshot.key();
var sc = snapshot.val();
var scScore = sc.Score;
for (var i=0; i<11; i++) {
var rangNum=i+1;
document.write("<tr><td>" + rangNum + ".</td>");
document.write("<td>" + scName[i] + ".</td>");
document.write("<td>" + scScore[i] + ".</td></tr>");
}
});
</script>
The website worked fine but the table not. So later I realized that this was the wrong path for my reference so I changed the "/scores" in my referencelink to "/users". But when I now run my webapp, I see the page for 1 second and than it´s immediately switching to an page where you can see this code when you look in the dev-tools of chrome:
<html><head></head><body>1.u.</body></html>
So I don´t know what´s wrong. The address of that html is still my index.html-
For full code: http://pastebin.com/UYkPGY60
Thamk you for all tips/suggestions!
JavaScript Session storage variable on another page
So I'm rather new to JavaScript and I would love some help getting this code to work. I've looked at multiple other posts talking about session storage as well as if/else statements and still can't seem to figure it out.
I have a page, lets call it page 1 and it has 3 links, "red" "green" and "blue".
When you click on any of these links its function sets a session storage variable 'colorVar' to the color chosen and then redirects to a page called page 2.
As page 2 loads, the window.onload action is used to start a function according to the variable set on page 1. In this case the function that starts on page 2 simply displays "Your color is ____!".
Heres the code:
<!-- [This is Page 1] -->
<a href="Page2.html" onclick="colorRed()">Set color to red</a>
<a href="Page2.html" onclick="colorBlue()">Set color to blue</a>
<a href="Page2.html" onclick="colorGreen()">Set color to green</a>
<script>
function colorRed() {
sessionStorage.setItem("colorVar", "red");
}
function colorBlue() {
sessionStorage.setItem("colorVar", "blue");
}
function colorGreen() {
sessionStorage.setItem("colorVar", "green");
}
</script>
<!-- [This is Page 2] -->
<script>
window.onload = sessionStorage.colorVar + 'Write()';
function redWrite() {
document.write("Your color is red!")
}
function blueWrite() {
document.write("Your color is blue!")
}
function greenWrite() {
document.write("Your color is green!")
}
</script>
div with max-width not taking the max width
I have a page with a div centered within a "main" div. The main div is full width and the inner div has a max-width equal to the width of the "main" div. When filling it up with elements it only fills up about half the screen. What am i doing wrong?
CSS: (in sass)
#main
z-index: 0
width: 100%
min-height: calc( 100% )
background: #FFFFFF
position: absolute
left: 0px
top: 0px
padding: 50px 0px
text-align: center
div.container
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
display: block
max-height: 100%
margin: 0 auto
width: auto
max-width: 100%
overflow-y: auto
overflow-x: hidden
text-align: left
div.box
width: 220px
height: 200px
border: 1px solid #5774FF
padding: 19px
margin: 10px
float: left
box-shadow: 1px 1px 4px #CCC
HTML:
<div id="main">
<div class="container">
<div class="box">
<form action="/save" method="post">
<input type="text" placeholder="code" name="name"/>
<select name="education">
<option value="3">option 3</option>
</select>
<button type="submit">save</button>
</form>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
Div Display Hide on Selection
Hi There _ I'm a Newbie to all of this and really struggling with a dropdown menu that displays a div on loading but then hides the div and replaces with another on selection from a dropdown. I've spent hours trying to get this right and looked at a number of options. The closest I've got is a response to an earlier question on this. I've settled on is here.
I've adapted it slightly as don't want "Select...".
Script remains the same, as does the CSS. Here is the HTML which I've adapted:
<select id="target">
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
</select>
<div id="content_1" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 1</div>
<div id="content_2" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 2</div>
<div id="content_3" class="inv" style="width:250px; margin-left:-10px; height:420px">Content 3</div>
and just in case here's the script:
<script>
document
.getElementById('target')
.addEventListener('change', function() {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null) {
target.className = 'vis';
}
});
</script>
Centre Responsive Navigation Icons
Is anybody able to help? Struggling to centre these icons and make them responsive to the width of the screen. I am trying to get these icons to come closer as the screens width is changed I've been trying to give the margins a '%' "as you can see by my code" so that they would shrink with the width and come closer to each other but it really is not coming out the way i was expecting it to! This seems simple but i cant cant get! cheers guys
html, body {
background-color:#B0B0B0;
margin:0;
padding:0;
font-family: sans-serif;
color: black;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px;
}
.navigationbar {
height: 70px;
width: 100%;
background: black;
border-bottom: solid 10px #1BD2E1;
color: white;
}
#content {
position: absolute;
background-color: white;
width: 800px;
height: 100%;
margin: auto;
top: 300px; left: 0; bottom: 0; right: 0;
}
.logo-container{
display: block;
position: relative;
left: 20%;
width: 90%;
}
.blockicon {
display: block;
position: relative;
width: 60px;
height: 60px;
top: 45px;
background:#A81D1F;
border-radius: 15%;
cursor: pointer;
float: left;
margin-left: 3%;
}<div class="navigationbar">
<div class="logo-container" >
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
<div class="blockicon">
</div>
</div></div>
<div id="content">
</div>css active selector exception for a child element [duplicate]
This question already has an answer here:
I have a div with :active selector effect,
this div contains a child little div which contains some buttons
Now -of course- when the parent div is clicked, the :active effect will be triggered, but also when one of the buttons inside the child-div is clicked the same thing happens, which is what I don't want, (it feels like the guest has clicked both the button and the parent div, very annoying)
What I want is: the :active effect is to be triggered only when the parent div is clicked, not when one of the elements inside a child-div is clicked.
Is it possible? I don't mind using JS or jQuery.
In the following example, the border goes red whether I click on the div or the button inside it:
#parent-div {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent-div:active {
border: 3px solid red;
}
#child-div {
position: absolute;
top: 20px;
left: 20px;
}<div id="parent-div">
<div id="child-div">
<button>Hello</button>
</div>
</div>HTML Email - different images for desktop and mobile
I think I have tried all possible existing solutions so I am here to ask if anyone know what is the best way to display a:
- simple (clickable or not clickable) image
- using a different image for desktop and mobile
- compatible with most popular email clients
The solution posted here: A Slick, New Image Swapping Technique for Responsive Emails seems to be the best so far but it has one little big issue, the 2 images are always downloaded (I don't mean displayed), either you are on mobile or desktop.
<a href="http://www.emailonacid.com">
<span id="switcher">
<img id="houdini" src="http://www.sample.com/desktop.jpg" alt="">
</span>
</a>
<style>
@media only screen and (max-device-width: 489px) {
span[id=switcher] {
display:block;
background-image: url(http://www.sample.com/mobile.jpg) !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 300px !important;
height: 250px !important;
}
img[id=houdini] {display: none !important;}1
}
</style>
The "img" tag always download the image even if it is not displayed (display:none).
I have tried many other ways, using background-images on tables but this seems to require VML code for microsoft and the solution looks really messy and sometimes not even working on android.
Is anyone able to help?
Thank you
How to label code block evaluations in orgmode on html export?
If I have a code block in orgmode, I can export its evaluation by using the :exports both option.
#+begin_src cpp -n :includes <iostream> :exports both
std::cout << "Hello there";
#+end_src
#+RESULTS:
: Hello there
When I export to html (C-c C-e h o), the result block follows the code block. However, I would like to more explicitly show that the 2nd block is the result of the first, with say, a simple label.
If I modify the above, like so:
#+begin_src cpp -n :includes <iostream> :exports both
std::cout << "Hello there";
#+end_src
Output:
#+RESULTS:
: Hello there
then the label "Output:" appears, but the result block appears twice -- once before the label, and once after. What's worse is that if I run the code within orgmode (C-c C-c), then a second result block is placed before the text label, "Output:". I suspect this is what's happening on export as well.
I have also noticed that when exporting to html, the result blocks are placed in a pre tags of class example. I thought I could modify the css with something like:
pre.example::before { content: "Output:"; }
but unfortunately, this places the text inside the pre block, and I can't add any line breaks.
Is there any simple way to add text labels to result blocks in either orgmode itself, or perhaps through css? I'd like to avoid javascript if possible.
How to make the float left and float right on the same line?
The Problem:
**The left part** (#nav ul li) which float: left
and **the right part** (#nav .search) which float: right
**are not in a line**.
it should be like this:
but mine:
The HTML:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="search">
<input type="text" name="search" id="search" value="search">
</div>
The CSS:
#nav ul li{
float: left;
list-style: none;
margin: 0 20px;
}
#nav .search{
float: right;
}
My Solutions:
Solution 1: Use bootsrap to build layout instead of doing it on my own, i use it on the footer, and it's perfectly on the same line! Yet I still don't know how it works
Solution 2: I use margin-top: -20px to pull the search box up, but I don't think it is a good practice.
Any one can help? Many thanks!
Dynamically setting the a css property of a child in Angular 2
I'm struggling to set a css property of a child tag in angular 2 using the ngStyle directive.
I'm not sure if it complicates it that I'm trying to apply it to an SVG.
Current Situation
I have a spinner, implemented as such:
<ion-spinner name="bubbles"></ion-spinner>
The selector comes from the ionic framework.
The current code I have is:
@Component({
selector: 'some-selector',
template: `
<ion-spinner name="bubbles"></ion-spinner>
`
})
export class SomeComponent {
private someColour: string = "red"
}
I know that I can use the styles array in the component director to affect the css styling (although due to encapsulation (I think) it has to go in to its own css style sheet, rather than the component's styles other wise it only affects some properties), and I can also use the ngStyle property to have dynamic css styling. However, the element comes out like this in the html:
<ion-spinner name="bubbles" class="spinner-bubbles">
<!--template bindings={}-->
<svg viewBox="0 0 64 64" style="top: 0px; left: 9px; animation-delay: -1000ms; animation-duration: 1000ms;">
<circle transform="translate(32,32)" r="5"></circle>
</svg>...
</ion-spinner>
and the css needs to affect the 'circle' tag. I know the css I can use is:
ion-spinner {
* {
fill: blue;
}
&.spinner-circles circle,
&.spinner-bubbles circle,
&.spinner-dots circle {
fill: blue;
}
}
As the spinner has bubbles, but:
how can i make the colour change dynamic from inside the selector?
I'm using angular "2.0.0-rc.1"
My VideoJS player messed up
I'm newbie learning CSS and HTML through the internet and i'm going to host a cartoon website but the fact that haven't know anything about wordpress just a little.
This is my problem
http://i.stack.imgur.com/qVaYv.jpg
http://i.stack.imgur.com/vouqa.png
You can see that my player messed up when i start and idk why here the code
<video id="video" class="video-js" width="1000" height="500" controls preload="auto" poster="https://i.ytimg.com/vi/MmeAPpEoGAI/maxresdefault.jpg" controls data-setup='{}'>
<source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m18" type='video/mp4' label='360p' />
<source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m22" type='video/mp4' label='720p'/>
<source src="https://lh3.googleusercontent.com/vvT0ZbARuW8E17sX9MbpbFJ81fe_p_TlzSPSWwn3bVVXzPeN6bMsW3h0YsUaAsoxyw5dGkKAHBw=m37" type='video/mp4' label='1080p'/>
</video>
<script>
videojs('video').videoJsResolutionSwitcher()
</script>
BTW am i adding videoJS in right way ?
<head>
<link href="http://vjs.zencdn.net/5.10.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.10.4/video.js"></script>
<link href="http://127.0.0.1/videojs-resolution-switcher.css" rel="stylesheet">
<script src="http://127.0.0.1/videojs-resolution-switcher.js"></script>
The player showing fine with the expamle from videojs.com
Stop Bootstrap Navbar Hamburger Stacking With Branding
The picture demonstrates this well. When resizing the browser the hamburger stacks, then (still being stacked) the logo resizes via 'max-width: 100%'. For some reason I can't figure out how to disable stacking and force the logo to resize earlier. Here is the plain code with attempted fixes erased.
<nav class="navbar navbar-default navbar-fixed-top navbar-lg dropShad noMar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand noPad" href="index.html"><img src="images/logo.png" style="width: 355px; max-width: 100%;" /></a>
<button type="button" class="navbar-toggle collapsed marBot18" data-toggle="collapse" data-target="#corbex-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="corbex-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="index.html"><b>Home</b><span class="sr-only">(current)></span></a></li>
<li><a href="location.html"><b>Location</b></a></li>
<li><a href="contactUs.html"><b>Contact Us</b></a></li>
</ul>
</div>
</div>
</nav>Forms and submit in Laravel Blade
My web app handles info on semesters. The info on this semesters can be displayed on a table, exported as pdf and exported as csv.
My idea is to have one dropdown (semantic ui) from which the users selects the semester (which updates the table on click), and then clicks one of those two export buttons.
I'm struggling with the code and whats the best way to do this.
This is what I have now:
My dropdown (semantic ui)
<div class="ui selection dropdown">
<input id="semester" name="semester" type="hidden">
<div class="default text">All semesters</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="">Semester</div>
@foreach($semesters as $semester)
<div class="item" data-value="<?php echo $semester->id ?> ">
<a href="{{ url('match/semester/' . $semester->name) }}">{{ $semester->name }}</a>
</div>
@endforeach
</div>
</div>
For each of the two buttons I created an extra form with a hidden field which is updated to the selected semester using javascript.
{!! Form::open(array('url' => 'match/pdf')) !!}
{{ Form::hidden('semester_pdf', $semester) }}
{!! Form::submit('PDF', ['class' => 'btn btn-success tn-sm']) !!}
{!! Form::close() !!}
{!! Form::open(array('url' => 'match/csv')) !!}
{{ Form::hidden('semester_csv', $semester) }}
{!! Form::submit('CSV', ['class' => 'btn btn-success tn-sm']) !!}
{!! Form::close() !!}
and the javascript which udpates the value of the hidden fields:
<script>
function myFunction(){
document.getElementById("semester_pdf").value = "WS2016";
}
</script>
I'm pretty sure I'm not doing this the right way.
Any help?
Need help in parsing html tags in excel or any other method
I have over a thousand email addresses in the format below, placed in a column in excel 2007, like this:
<td class="Normal">street name1<br>street name 2<br>city, state zipcode<br>country<br>contact no</TD>
Some cells have different <br> tags like this:
<td class="Normal">street name 1<br>city, state postal<br>country</TD>
I can extract the last two tags using the excel "text to culumns" functions but the transformation is not consistent when extracted in columns and it will take forever to align each column to its right place.
The list all have "," to distinguish the street addresses, and I can use "text-to column' feature to extract all data before "," and then work on the first subset to get the data out. like this:
<td class="Normal">street name1<br>street name 2<br>city
I've searched all over the web and have gone through many formulas. Can't seem to extract text between two <br> tags.
Is there a way to extract between the two first <br> tags or a script to count the number of <br> tags and then use a script to extract each set of <br> tags in different columns, as some have one <br> tags and other have two <br> tags, in Excel.
please do suggest any other way or a tool that splits each in their respective columns.
Many Thanks. Haroon
CSS rails rows of 4 with 4 columns
Trying to get rows of 4 contacts/images in a grid like layout. To be in the centre of the screen and will reduce down (4,3,2,1) rows when shrinking the screen or using different devices. Currently have one continual row(incorrect) that does shrink image by image (correct). Have tried the -webkit this has not worked also looking at grid but this seems to static.
Is there a way in CSS to set length of a row by number i.e. break if nth count == 3 of images or a specific number of columns?
Any ideas or the best way to do this?
current code-
index.html.erb
<html>
<head><style>
body {margin:20px;}
.polaroid {
display: inline-block;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin: 10px;
border: 1px solid #ccc;
width: 180px;
height: 210px;
}
.polaroid:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
.container {
width: 100%;
height: 100%;
text-align: center;;
padding: 10px 27px;
}
.work {
width: 55%;
height: 55%;
border-radius: 50%;
border: 1px solid black;
overflow: hidden;
padding:5px 4px;
}
</style></head>
<body>
<div>
<%if user_signed_in? %>
<%= link_to 'Log out', destroy_user_session_path, method: :delete %>
<%end%>
</div>
<% if @contacts.any? %>
<% @contacts.each do |contact| %>
<div class="polaroid" >
<div class="container">
<%= link_to image_tag(contact.image.url(:thumb), :class=>"work" ), contact_path(contact) %>
<h3><%=contact.firstname%> <%=contact.surname%></h3>
<%=contact.email%><br />
<%=contact.phone%>
</div>
</div>
<%end%>
<%else%>
No contacts yet!
<%end%>
<br style="clear:both" />
<%= link_to 'Add a contact', new_contact_path%>
</body>
</html>
CSS flexbox width 100% Firefox
I'm having an issue with this scenario in Firefox. #pager takes the width of its children. However, in Chrome, it takes the width of its parent. How can I make #item-list respect the width of its parent in Firefox?
take a look! https://jsfiddle.net/owmpatbh/2/
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="main">
<div id="content">
<p id="stuff">blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
<div id="pager">
<div id="item-list">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
CSS:
#wrapper {
display: flex;
width: 100%;
height: 100%;
}
#sidebar {
overflow: auto;
flex: 0.25;
border:3px solid green;
min-height: 200px;
}
#main {
display: flex;
flex: .75;
flex-direction: column;
border:3px solid orange;
}
#content {
position: relative;
width: 100%;
flex: 0.85;
border: 3px solid blue;
}
#pager {
display: flex;
position: relative;
width: 100%;
background-color: #fff;
border: 3px solid pink;
flex: 0.15;
}
#item-list {
border: 1px solid black;
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.item {
display: inline-block;
padding: 5px;
width: 200px;
height: 200px;
background-color: red;
}
#stuff {
height: 200px;
}
*{
margin: 3px;
}
Indenting image placeholder text to remove from view area
Right, so, I've been informed by a usually high-quality, reliable source that best practice when creating linked images that also include text is as follows:
Create some placeholder text inside the anchor element like this:
<a class="logoWithText" href="logoWithText.raw">Mr Happy Forever Foobar</a>Change the element CSS to indent this text outside the viewing window:
.logoWithText { background-image: logoWithText; width = 200px; height = 100px; display: inline-block; text-indent: -9999px; }
The idea is that without doing this, if CSS is turned off on a user's machine, or they are trying to look at it with a screen reader, they're going to have problems viewing the image. But this way they will only see the text if CSS is switched off, and it will be positioned correctly.
But what if the image fails to load for some reason but they do have CSS switched on? The user is not going to see the placeholder text at all... and I'm also pretty uneasy about the whole put the text all of the way off the screen, as far as it can go as it seems pretty inelegant and I am worried there are likely to be all sort of unforeseen problems with writing code that's totally against the logic of the language in this way.
Can anyone suggest a solution which would account for both broken image links and a lack of CSS support on a user's device, and which would be more immediately intuitive to people viewing the code? If there's really no other way of doing this or you guys think my approach is totally wrong or whatever that's ok, I just want to know if I'm going about things the right way.
lundi 27 juin 2016
CSS : "Margin" not working right
Got some problems with CSS Margins.
1. Why cant i just use margin-top:50% and margin:bottom:50% on the classes .logo and .right to align them verically
According to what i've read margin:bottom:50% and margin-top:50% should automatically center vertically both.right and .logoin their container header but rather they come to some random middle place of the page
2.If i use margin-top:x% and get them in vertically middle position of header then when i resize the window to small the LOGO shifts from being in middle of headerto top.
html{
background-color: white
}
body{
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box{
margin:0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border:1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a{
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color:pink;
border:2px solid black;
}
.right{
margin-top:13px;
display: inline-block;
width: 600px;
background-color: pink;
border:2px solid black;
float: right;
text-align:center;
color:white
}
ul{
display: inline-block;
list-style-type: none;
font-size:35px;
width:100%;
padding-left:0;
}
li{
display:inline-block;
padding:7px;
}<body>
<header class = "top-box">
<a href="#" class = "logo">Konoha</a>
<div class = "right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>right now i used margin: (x) px thats why they stay in middle even if i make the window smaller
Margin property not working as expected
Why cant I just use
margin-top:50%andmargin:bottom:50%on the classes.logoand.rightto align them verticallyAccording to what I've read
margin:bottom:50%andmargin-top:50%should automatically center vertically bothrightand.logoin their containerheaderbut rather they come to some random middle place of the page.
This is my main problem ( this weird margin behavior on window resize)
- If I use margin-top:x% and get them in vertically middle position of header then when I resize the window to small the LOGO shifts from being in middle of header to top.
html {
background-color: white
}
body {
width: 88.5%;
height: 1200px;
margin: 0 auto;
border: 2px solid black;
background-color: #161e2c;
}
.top-box {
margin: 0 auto;
width: 99.5%;
height: 153px;
background-color: #314e59;
border: 1px solid rgb(211, 41, 97);
box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);
}
a {
display: inline-block;
margin: 23px 0 0 5px;
padding: 5px 5px;
max-width: 400px;
color: white;
text-decoration: none;
font-size: 500%;
background-color: pink;
border: 2px solid black;
}
.right {
margin-top: 13px;
display: inline-block;
width: 600px;
background-color: pink;
border: 2px solid black;
float: right;
text-align: center;
color: white
}
ul {
display: inline-block;
list-style-type: none;
font-size: 35px;
width: 100%;
padding-left: 0;
}
li {
display: inline-block;
padding: 7px;
}<body>
<header class="top-box">
<a href="#" class="logo">Konoha</a>
<div class="right">
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</div>
</header>
</body>right now I am using margin: (x) px that's why they stay in middle even if i make the window smaller
nth-child being ignored by the browser in bootstrap panels
I have <%= render @inspirations %>, which renders 4 inspirations:
VIEW CODE
<div class="panel panel-default">
<div class="panel-body">
<%= link_to inspiration_path(inspiration) do %>
<%= inspiration.name %>
<% end %>
</div>
</div>
But I want to remove the border:white on the left side for odd number and on the right side for even number inspirations (this way the panels touch the edges of the screen).
What I have right now for nth-child is being ignored by the browser
CODE
.home-panels a:nth-child(odd) .panel-default {
border-left: 0px !important;
}
.home-panels a:nth-child(even) .panel-default {
border-right: 0px !important;
}
.home-panels {} .panel-default {
border: 2.5px white solid;
}
.panel-body {}<div class="home-panels">
<div class="panel panel-default">
<div class="panel-body">
<a href="/inspirations/37-testing-to-see-border">
<div class="white-link">Testing to See Border</div>
</a>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<a href="/inspirations/36-testing-words">
<div class="white-link">Testing Words</div>
</a>
</div>
</div>
<div class="panel panel-default">
<a href="/inspirations/35">
<img class="testing-image" alt="This is a Goal-Setter & Bucket List Maker" src="/system/inspirations/images/000/000/035/original/IMG_5106.JPG?1466979374">
</a>
</div>
<div class="panel panel-default">
<a href="/inspirations/34">
<img class="testing-image" alt="This is a Goal-Setter & Bucket List Maker" src="/system/inspirations/images/000/000/034/original/IMG_5073.JPG?1466810578">
</a>
</div>