Just wondering if anyone knows if it is possible to style Foundation's Joyride tooltips to look something like this?
Specifically the little progress indicator and the placement of the button.
or even if anyone could point me towards some sort of resource in how to set something like this up?
Thanks
I have to use Rails 3.2 cause of my hosting. However, i installed the
gem "twitter-bootstrap-rails"
and i have also copyed the css from the book Agile Web Development with Rails, 4th Edition, Rails 3.2 (The Pragmatic Programmers) - 2011 of the layout of their app. I put it here:
C:\Bitnami\chiarini\app\assets\stylesheets
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require fullcalendar
*= require_tree .
*/
#banner {
background: #9c9;
padding: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
img {
float: left;
}
}
#notice {
color: #000 !important;
border: 2px solid red;
padding: 1em;
margin-bottom: 2em;
background-color: #f0f0f0;
font: bold smaller sans-serif;
}
#columns {
background: #141;
#main {
margin-left: 17em;
padding: 1em;
background: white;
}
#side {
float: left;
padding: 1em 2em;
width: 13em;
background: #141;
ul {
padding: 0;
li {
list-style: none;
a {
color: #bfb;
font-size: small;
}
}
}
}
}
i put the view of my layout:
C:\Bitnami\chiarini\app\views\layouts\application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body class="<%= controller.controller_name %>">
<div id="banner">
<%= image_tag("logo.png") %>
<%= @page_title || "aaa" %>
</div>
<div id="columns">
<div id="side">
<ul>
<li><a href="http://www....">Home</a></li>
<li><a href="http://www..../faq">Questions</a></li>
<li><a href="http://www..../news">News</a></li>
<li><a href="http://www..../contact">Contact</a></li>
</ul>
</div>
</div>
<div id="main">
<% if notice %>
<p class="alert alert-success"><%= notice %></p>
<% end %>
<% if alert %>
<p class="alert alert-danger"><%= alert %></p>
<% end %>
<%= yield %>
</div>
</body>
</html>
And it's how it appears:
And it should be like this:
I don't know where is the problem. is it possible that bootstrap overwrite something of the css?
I'm trying to style the inside of a select option. This is the code I'm using to display the various parts of results from my sql query ...
echo '<option value="'.$colour_id.'">'.$range_name.' - '.$colour.$plank_display.$code_display.'</option>';
I am trying to show $colour & $plank_display in bold/strong
I have tried ..
echo '<option value="'.$colour_id.'">'.$range_name.' - <span style="font-weight: bold;">'.$colour.$plank_display.'</span>'.$code_display.'</option>';
and ...
echo '<option value="'.$colour_id.'">'.$range_name.' - <strong>'.$colour.$plank_display.'</strong>'.$code_display.'</option>';
but neither seem to be yielding the results I am looking for.
There is no other styling applied to the form, neither is there even a stylesheet attached to the page yet.
Any ideas? Or am I going about this in the wrong way.
I can apply styling to the option to make the whole line bold using css in a style sheet, but I just want this specific bit to stand out.
I am trying to make a responsive website. My issue is if i am not setting a div height then the bottom of the div content has come up and overlay with the top div contents. Also if I sets a height, when i see it in responsive it takes the full height and show white space. Can you guys please sort it out?
We just switched our WordPress-Site on an Azure Server.
For the development of our theme we use LESS CSS with the Client-Side JS file.
Since we switched, it says that the less file does not exist on our server - but it does. We have a .css file in the same folder and Azure can find the .css file.
This is the console output:
GET http://ift.tt/1DpvCGs 404 (Not Found)b.exports.g.doXHR @ less.js:13b.exports.g.loadFile @ less.js:13j @ less.js:13k @ less.js:13b.exports.n.refresh @ less.js:13b.exports.n.refresh @ less.js:132../add-default-options @ less.js:13e @ less.js:13a @ less.js:13(anonymous function) @ less.js:13i @ less.js:13(anonymous function) @ less.js:13 less.js:13
Uncaught (in promise) Object {type: "File", message: "'http://ift.tt/1DpvCGs' wasn't found (404)", href: "http://ift.tt/1DpvCGs"}
What can we do about this?
am doing a HTML website, and I have a main menu - Home, About etc.
I have several html pages and for each page I want the menu li to change color to #E38400.
Here is my code:
<div id="nav">
<ul>
<li class="youarehere"><a href="#"><h3>menuITEM</h3></a></li>
<li><a href="#"><h3>menuITEM</h3></a></li>
<li><a href="#"><h3>menuITEM</h3></a></li>
<li><a href="#"><h3>menuITEM</h3></a></li>
<li><a href="#"><h3>menuITEM</h3></a></li>
</ul>
</div>
and my style.css code:
.header #nav ul li .youarehere {
background:#E38400; border-radius:5px; color:#FFF;
}
but the first list item still shows the same color etc. I want to use neither jQuery nor any other script, but why is this not working?
I have following code and it changes height to 27px instead of default height of - col-md-1. What should be the fix for it?
Code:
<div class="col-xs-1 col-sm-1 col-md-1 clearfix divCounterText">
<span class="orDivText">or</span>
</div>
span or is displayed on top with space at botton on a navbar / div.
I change the contrast on my site by clicking one of the two "a" links and change font-size by clicking one of the three "a" links. I change the contrast by adding/removing a new class to/from the body.
Question: How to set present contrast and font-size in one cookie ? I want to also save changes when user change subsite... I'm using jquery-1.2.3...
HTML:
<div id="contrast">
<ul>
<li><a href="#" id="first_contrast" class="con1">a</a></li>
<li><a href="#" id="second_contrast" class="con2">b</a></li>
</ul>
</div>
<div id="font">
<ul>
<li><a href="#" id="one" class="fon1">c</a></li>
<li><a href="#" id="two" class="fon2">d</a></li>
<li><a href="#" id="three" class="fon3">e</a></li>
</ul>
</div>
jQuery
$(document).ready(function(){
if($.cookie('f')) {
$('body').css('font-size', $.cookie('f'));
}
if($.cookie('t')) {
$('body').addClass($.cookie('t'));
}
$('#one').click(function(){
$('body').css('font-size', '60%');
$.cookie('f','60%', { path: '/', expires: 10000 });
});
$('#two').click(function(){
$('body').css('font-size', '72.5%');
$.cookie('f','72.5%', { path: '/', expires: 10000 });
});
$('#three').click(function(){
$('body').css('font-size', '85%');
$.cookie('f','85%', { path: '/', expires: 10000 });
});
$('#first_contrast').click(function(){
$('body').removeClass('highcon');
$.cookie('t','main', { path: '/', expires: 10000 });
});
$('#second_contrast').click(function(){
$('body').addClass('highcon');
$.cookie('t','highcon', { path: '/', expires: 10000 });
});
});
I've a requirement where if the size of browser is less than 992*1024, then scrolling would be added automatically. Footer which I wrote is working, but I'm unable to position Media part. I wrote a footer as shown in the screen shot:
I'm trying to create a footer which is similar to this:
.imgcontainer {
background: #E6E6E6;
box-shadow: 0 4px 2px 1px #000;
}
#footer {
height: 350px;
background: #003663;
min-width: 992px;
}
#footerItems {
min-width: 992px;
width: 100%;
padding: 0px 6%;
min-width: 992px;
}
#footerItems div {
display: inline-block;
color: #FFF;
padding-top: 2%;
font-weight: bold;
font-size: 16px;
}
.accountPos {
padding-left: 3%;
}
#footerItems div ul {
padding-left: 0;
}
#footerItems div ul li {
list-style-type: none;
font-weight: 400;
font-size: 13px;
font-style: italic;
}
#videoptions {
height: 74px;
width: 23px;
background-color: #4c5053;
}
#footerItems div video {
min-width: 35px;
min-height: 30px;
}
.socialinks {
min-width: 450px;
width: 39%;
float: left;
}
.slinks {
padding-left: 14%;
}
<script src="http://ift.tt/1InYcE4"></script>
<link href="http://ift.tt/1IoGhOh" rel="stylesheet" />
<link href="http://ift.tt/1QMqYrP" rel="stylesheet" />
<link href="http://ift.tt/1K1B2rp" rel="stylesheet" />
<div id="footer">
<div class="col-md-12 imgcontainer">
<img src="images/Bistip-in-media.png" class="center-block">
</div>
<div id="footerItems" class="col-md-12">
<div style="width: 12%;">About Us
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos" class="">Account Information
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos" class="col-md-3" style="padding-left: 9%;">Market
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="accountPos" style="padding-left: 9%;">Bistip
<ul>
<li>About us</li>
<li>Media reviews</li>
<li>Bistip guide</li>
</ul>
</div>
<div class="" style="padding-top: 2%;">Media
<div>
<video controls height="30" width="60">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.
</video>
</div>
</div>
<div class="socialinks">
<div>
<img src="images/fb.png" alt="f" style="width: 29%;">Facebook
</div>
<div class="slinks">
<img src="images/tw.png" alt="t">Twitter
</div>
<div class="slinks">
<img src="images/go.png" alt="g">Google+
</div>
</div>
</div>
</div>
Everything looks good, but Media part isn't coming properly. How can I fix it? JSFiddle link is given here.
I am trying to make a website with materialize css that is fully responsive for a product that my friend is making. I have a layout in materialize for mobile and for desktop but I don't know how to make them shift columns when the page gets to a certain size. The mobile code is just all col s12 but on the desktop version it is more split. Any help or input would be appreciated.
Thanks again, Optimistic.
I'm in the process of trying to wrap my head around using srcset and sizes on img tags.
Whilst I think I have grasped the basics – mainly thanks to this article – I'm struggling in practical application of the sizes attribute.
In all the examples I can find, things are massively simplified and the sizes attribute is declared as if at each breakpoint, the image width will be an exact proportion of the viewport width, allowing the use of vm units. For example:
sizes="(min-width: 36rem) 33.3vw,
100vw"
Of course in real life, images are often within other containers which themselves might be within other containers and so on, each with their own margin, padding or positioning.
Is it fair to say that in all but the simplest cases (when images are of fluid width and are not simply an exact percentage of the viewport), calc must be used, potentially adding hideously complex calculations to the html markup as an images dimensions need to be calculated working from viewport width, down through any containers to the image? For example how would you calculate the correct size for an image located a container with 7px padding that is itself inside a container that is 45% of its container with 15px margin that is inside a sidebar that is 25% of the main page container which has 15px of padding and has a min-width of 1220px?
sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)),
100vw"
Trying to calculate this in the sizes attribute seems ludicrous, especially given that all this might change at each breakpoint. having to keep this massively complex calculation in sync with changes to the CSS seems like madness. And then you have the patchy browser support for calc.
I feel like I'm missing something obvious, but what is it?
Note: I'm aware of Alexander Farkas's excellent Lazy Sizes which does the size calculations for you through the use of data attributes, but I'm interested in standard usage.
I have created three div elements in an HTML page, each of these 3 div elements contain a text box i.e. an input element in it. One div, is made a source while other two are made target. The HTML page has a button name toggle.
The initial connection between source div and one of the target div is created with the help of drag and drop. When toggle is clicked, it will remove the connection between the source and the target, and will create the new connection between source and the other target. Now, when performing analysis using google chrome developer tools over this scenario, the number of div elements keep on increasing by 2 for every toggle.
<!DOCTYPE html>
<html>
<head>
<title>
jsplumb_demo
</title>
<script src="./dist/libs/jquery.js"></script>
<script src="./src/jquery-ui.min.js"></script>
<script src="./src/jquery.jsPlumb-1.7.6-min.js"></script>
<script>
var connection12 = undefined, connection13 = undefined;
jsPlumb.ready(function() {
var exampleGreyEndpointOptions = {
endpoint:"Rectangle",
paintStyle:{ width:10, height:10, fillStyle:'#666' },
isSource:true,
connectorStyle : { strokeStyle:"#666" },
isTarget:true,
container:$('#container'),
connector : "Straight",
deleteEndpointsOnDetach: true
};
jsPlumb.makeSource($('div.source'), exampleGreyEndpointOptions);
jsPlumb.makeTarget($('div.target'),exampleGreyEndpointOptions);
jsPlumb.makeTarget($('div.target1'),exampleGreyEndpointOptions);
init = function(connection){
};
connectionDelete = function(){
if(connection12 !== undefined){
jsPlumb.detach(connection12);
jsPlumb.unmakeTarget($('div.target'));
connection13 = jsPlumb.connect({source : $('#source'), target : $('#target1')},exampleGreyEndpointOptions);
connection12 = undefined;
}
else{
jsPlumb.detach(connection13);
jsPlumb.unmakeTarget($('div.target'));
connection12 = jsPlumb.connect({source : $('#source'), target : $('#target')},exampleGreyEndpointOptions);
connection13 = undefined;
}
};
});
jsPlumb.doWhileSuspended(function(){
jsPlumb.bind("connection", function(connInfo, originalEvent) {
init(connInfo.connection);
//alert("Source div id = " + connInfo.sourceId + " Target div id = " + connInfo.targetId);
var input = "input#" +connInfo.sourceId;
var inputval = $(input).val();
var output = "input#" +connInfo.targetId;
$(output).val(inputval + " from " + connInfo.sourceId);
connInfo.targetId ==='target'?connection12 = connInfo : connection13 = connInfo;
});
jsPlumb.bind("click", function(conn, originalEvent) {
if (confirm("Delete connection from " + conn.sourceId + " to " + conn.targetId + "?"))
jsPlumb.detach(conn);
});
jsPlumb.bind("connectionDrag", function(connection) {
// alert("connection " + connection.id + " is being dragged. suspendedElement is ", connection.suspendedElement, " of type ", connection.suspendedElementType);
});
jsPlumb.bind("connectionDragStop", function(connection) {
// alert("connection " + connection.id + " was dragged");
});
jsPlumb.bind("connectionMoved", function(params) {
//alert("connection " + params.connection.id + " was moved");
});
});
</script>
</head>
<body>
<div id="container">
<div class="source" id="source" style="position: absolute;left: 200px" >
<input/>
</div>
<div class="target" id="target" style="position: absolute;left: 600px" >
<input />
</div>
<div class="target1" id="target1" style="position: absolute;left: 600px; top:200px" >
<input />
</div>
</div>
<button name="delete" type="button" onclick="connectionDelete()">Toggle</button>
</body>
</html>
Edit :-
I am new to Tornado. I am trying to link a CSS file to the html template. I am using jinja2 with Tornado. But due to some unknown reasons the CSS file is not loading up.
EDIT: I have created my custom render_template function which is working fine.
Here is my Request Handler's Class:
class Index(RequestHandler):
def get(self):
path = os.path.join('static/css/', 'custom.css')
return self.write(render_template('index.html', path = path))
and here is my index.html template:
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{path}}"/>
</head>
<body>
<div>
<div class="header">
asdasdasd
</div>
</div><!--wrapper-->
</body>
</html>
but the browser is returning the 404-NotFound error for the css file with the correct url, that is http://localhost/static/css/custom.css
Does anybody know of any examples or tutorials on how to achieve the below:
On desktop the layout will be:
On mobile the layout will change to:
As you can see, I want box 2 and box 3 to re-order and swap positions on mobile
Does anybody have any tips or advice?
I am trying to listen for an event that indicates a new line has been created in a contenteditable div. The purpose is to eventually show a user some options each time a new empty line is created and the caret is on that line, or if the user clicks the caret position to a currently empty line.
In my book there seem to be three events that would lead to the user being on a new line within a contentediable div:
of course in a contentediable div a new line means different things to different browsers, in chrome it seems to create <p></p> tags, but having browsed around SO enough it seems that other browsers might create <div></div> or perhaps another tag - <br/>
I've now tried to figure this out a couple of times and just have to get it done. Is it really the best way to listen for new elements being added under that div, and/or check if the caret position is currently within empty 'new line' tags. checking each time the caret moves seems highly inefficient - is there a better way to do this?
To summarise for tldr; people
Just fyi this is within an Angular context and I have jQuery also (the answer can choose to use or not use these libraries).
I just made a phone number to time zone converter and it displays result as:
Requested Phone No.: +1 732 78782722
Country: United States
Expected Region: Newark, New Brunswick
Timezone: America/New_York
Date: 2015-08-05
Time: 01:51:03 am
What I want to do is place all these outputs in a single line. Here's my output code
if(!empty($record['country_name'])) {
$this->display('<strong>Country:</strong> ' . $record['country_name']);
}
if(!empty($record['city'])) {
$this->display('<strong>Expected Region:</strong> ' . $record['city']);
}
//echo json_encode($date);
if(!empty($record['zone_name'])) {
$this->display('<strong>Timezone:</strong> ' . $record['zone_name']);
$this->display('<h2><strong>Date:</strong> ' . date('Y-m-d') . '</h2>');
$this->display('<h2><strong>Time:</strong> ' . date('H:i:s a') . '</h2>');
}
Thanks for the help.
At first here is my Fiddle:
So maybe it won´t work on Fiddle because the window size is too small. Here are the problems I have and I can´t solve after trying it for 8 days -.- . 1.Deactivate Drag option after once dropped: So once an item was dropped it shouldn´t be draggable anymore , so how is it possible to do this? 2.I can´t drop my items in the e.g. 6. or 7. row. 3.Everytime I try to add instead of a text in the header an image it won´t appear. 4.Also my footer doesn´t appear.
I hope someone can help me please, And sorry for my bad english :| Greetz
I'm trying to apply the text-indent technique (show pseudo element but not parent element) to hide the text into the parent container and just show the added content into a pseudo-element.
The markup I have is something like:
<a href="" class="icon">@</a>
but it could also have not exclusively text inside:
<a href="" class="icon"><img src="pic.jpg" /></a>
<a href="" class="icon"><div>Some text in a block with its own <element>, <img src="img.jpg" /> or CSS styling</div></a>
And then the CSS:
.icon {
position: relative !important;
overflow: hidden !important;
text-indent: -100% !important;
white-space: nowrap !important;
}
.icon:before {
position: absolute;
right: 0;
content: "\xe000";
}
(the !important clause is there cause the icon should have priority on whatever is inside the element content.)
The problem are that:
I am testing on Firefox 39.0.
What do I miss?
PS - I obviously don't want to just change the color of the text into the container to hide it.
I have added custom controller to google map api. one div in the custom controller should be clickable. I have added cursor:pointer as the style. It works well in firefox but not in chrome. In chrome browser, it displays the hand icon but click action is not working.
You can do this?
background-color: url(".<?php current domain ?>."/shop/img/test.jpg");
i want the current url to create universal scripts for my site
This question already has an answer here:
My issue is as follows: I've got a navigation bar with main navigation and some of these links have additional drop down menus. I'm trying to change the styling of the main link, whenever I hover over the drop down menu. I can't use classes as it will change the style of all the main nav links. Which means I can't use the following method
.dropdown:hover ~ .main{
change css here
}
I also can't use individual IDs for the linked drop down and main nav as it appears on too many pages already.
The format of the HTML is as follows
<a class="main-link">Main Link</a>
<div class="drop-down"></div>
My question is; is there a way to change the style of an element which appears directly before an element within a HTML document?
By default when I set up ticks with D3, the text overlaps with the lines as follows:
I am aware of two ways to correct this but both are flawed. The easiest way would be to add something like:
transform(0 -20px)
to the text element's css. the problem here is browser compatibility. The more browser-compatible way of doing things is:
d3.selectAll('text').attr('transform','translate(0,-20)')
The problem is that this won't work with dynamic scales; the function must run after the text elements have been appended so it's not compatible with transitionally updating tick scales.
This question already has an answer here:
How to change select option background hover color using css ? I want select dropdown like this below image
I tried to write a nav bar with foundation.css, but the sub-menu does not show when mouse move on.
The question is, how can I show the sub-menu of test in this webpage.
I tried to change the visibility, display, z-index, left, but nothing happend.
I'm having an issue with skew and background fixed in Chrome and Firefox. As I have noticed here the problem is not only in my case.
.product {
width: 100%;
height: 400px;
-webkit-transform: skewY(5deg);
-moz-transform: skewY(5deg);
background-attachment: fixed !important;
background-position: 50% 0;
background-size: auto 150%;
background-repeat: no-repeat;
padding-bottom: 16em;
text-align: left;
position: relative;
z-index: 0;
}
.product div {
-webkit-transform: skewY(-5deg);
}
As you can see in the jsfiddle Sam Selikoff created, you can see that while scrolling down the fixed background is not displayed in the right corner of the photo. There is background-color triangle veiling the fixed background.
The funny thing is here: if you remove background-attachment: fixed, skew is working fine.
I tested this in Safari as well and it handled it properly.
I am trying to strip my html content of all unwanted tags and just return text with basic formatting (ul, b, u, p etc) or just plain text (but preserving new lines, spacing etc) however I am having trouble creating a catch all solution which will let me keep the structure of the content that I pasted.
Example string:
<p class="Bodytext" style="color: rgb(51, 51, 51);background-color: rgb(255, 255, 255);">
<span lang="EN-GB">Hello
<span class="Apple-converted-space"> world, </span>
<span class="Cross-reference">
<a href="" style="color: rgb(66, 139, 202);background-color: transparent;">Cough
</a>
</span>
<span class="Apple-converted-space"></span>and
<span class="Apple-converted-space"></span>
<span class="Cross-reference">
<a href="" style="color: rgb(66, 139, 202);background-color: transparent;">Feverish - risk assessment</a>
</span>.
<span class="Apple-converted-space"></span>
</span>
</p>
<p class="Bodytext" style="color: rgb(51, 51, 51);background-color: rgb(255, 255, 255);">
<span lang="EN-GB">Fin. </span>
</p>
I have a div which is like a container and inside of it there are 2 images. One image is on the right side of the dive and the other is on the right.
Both of them are wrapped with a div, and that div's position is fixed.
My problem is that I can't locate the right image to be attached to the right side of the conatiner. I tried the float and the right properties but they not give the expected result.
How can I attach div to the right of another div?
I am trying to figure out why HTML content underneath a WebGL animation cannot be clicked or interact with.
Please see example.
Currently the div containing the animation is set to:
.webgl-glitch {
position: absolute;
z-index: 2;
overflow: hidden;
opacity: 0.5;
}
..otherwise it will not display at all.
I have tried setting a z-index: 1; property on the header/container div, but this does not seem to help.
Here is the HTML section of the header including the animation div:
<!-- Begin Header animation -->
<div class="webgl-glitch"></div>
<!-- End Header animation -->
<header id="principalheader" class="centerContainer aligncenter fullScreen tintBackground stonebackground" style="z-index:1">
<div>
<div class="container">
<!-- Site logo-->
<a href="#" class="logo"><img alt="KUBO" src="img/logo.png"></a>
<!-- Site Principal slogan-->
<h1>Digital Exploration for the the digital age</h1>
<!-- Site Resume-->
<div class="row">
<div class="hidden-xs col-md-10 col-md-offset-1">
<h2>CRAFT experiences that <strong>defy</strong> expectations<br/>
CREATE from the the twin <strong>virtues</strong> of inspiration and innovation<br/>
BEAUTY in simplicity and complexity <strong>combined</strong> for the best of both worlds</h2>
</div>
<div class="col-md-10 col-md-offset-1">
<a class="fa fa-angle-down" href="#" data-scrollto="#about"></a>
</div>
</div>
</div>
</div>
</header>
Another thing I have noticed is that if I wrap the .web-glitch animation div inside a HTML5 canvas element it also does not display at all? why would this be?
The only property I have on canvas in the the CSS at the moment is width: 100%;
I'd like to customize the mouse cursor during a HTML5 drag operation because it's one thing to setDragImage to something representing the object being dragged (not in IE) but it generally looks pretty awful having the standard mouse cursor superimposed. This is especially the case when the 'DragImage' is small and there is no way to control the opacity of the 'DragImage'.
I have various CSS cursors specified on the drop target but these get disabled / ignored by both Chrome and Firefox during a drag. This leaves us with the standard unattractive arrow-and-dotted-box.
Here's the fiddle: http://ift.tt/1Unb0Tg
Here's the HTML:
<img draggable id="i" src="http://ift.tt/1gJHVmN"/>
<table>
<tr>
<td class="a">Copy</td>
<td class="b">None</td>
</tr>
<tr>
<td class="c">Move</td>
<td class="d">Crosshair</td>
</tr>
</table>
Here's the CSS:
td {
padding: 30px;
font-size: 2em;
font-family: arial;
border: 3px solid white;
background-color: #eee;
border-spacing: 10px;
}
.a { cursor: copy;}
.b { cursor: none;}
.c { cursor: move;}
.d { cursor: crosshair;}
img {
cursor: move;
cursor: -moz-grabbing;
}
Here's the jQuery:
var i = $('#i');
i.on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData('text', 'foo');
e.originalEvent.dataTransfer.setDragImage(this, this.offsetWidth/2, this.offsetHeight/2);
});
$('td').on('dragenter, dragover', function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
$('td').on('drop', function(e) {
$(this).append(i);
e.preventDefault();
});
Is there a way to hide or change the mouse cursor during a HTML5 drag?
I have a header element that has a dynamic height that is only initialised once. Now I want to set an element, say foo, in the scollable view of the angular app that has the height of the screen, MINUS the header height. So they fit perfectly onto the screen. Below the element that has height 100vh - dynamic size, are more elements.
I read one can use something like this:
var myHeight = angular.element(document.querySelector('#header'))[0].offsetHeight
and then say use it in dynamic inline styling e.g.
<foo style="height: calc(100vh - {{myHeight}})">
note, calc is a css function.
but where do I use it? when is my app loaded to get correct height?
I want to add css styles to my login page. The application works as:
ion-side-menus where is:
ion-side-menu-content inside of it is:
ion-nav-view name="content"
Controller looks like:
.state('myapp.login', {
url : "/login",
views: {
'content': {
templateUrl: "myApp-core.login.html",
controller : 'LoginController'
}
}
})
The problem is that when I changed a main css it causes on all sub pages but I want to change only my login page (myApp-core.login.html). Thanks for any help.
Dynamic Column width According to Its Content
I tried adjusting the column width dynamically according to the content this way ,by finding characters length of each row ,then finally getting the max length out of it and setting it to grid column width.
loadComplete : function () {
$("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
var $this = $("#grid"),
colModel = $this.jqGrid("getGridParam", "colModel"),
iCol,
iRow,
rows,
row,
n = $.isArray(colModel) ? colModel.length : 0;
var rowData = "";
var rowDataLen="";
var input = [];
var divs = $( "div" );
var colWidth=125;
for (iCol = 0; iCol < n; iCol++) {
input = [];
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
rowData = $(row.cells[iCol]).find(divs).html();
if(rowData != undefined)
rowDataLen = rowData.length;
input.push(rowDataLen);
}
var finalWidth = Math.max.apply(null, input);
if(finalWidth < colWidth)
finalWidth = colWidth;
$("#grid").jqGrid("setColWidth", iCol, finalWidth);
var gw = $("#grid").jqGrid('getGridParam','width');
$("#grid").jqGrid('setGridWidth',gw);
}
});
},
and it is working fine.
However it is too slow and getting Uncaught RangeError: Maximum call stack size exceeded
error when I have more records like 500.
Can anyone help to tweak the above solution so that it can be faster?
<td role="gridcell" style="text-align:left;" title="Hot-forged Hot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forged." aria-describedby="grid_test">
<div style="max-height: 120px">Hot-forged Hot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forgedHot-forged.</i><br><br><i>tttttttttttttttttttttttttttttttt</i></div></td>
I am actually finding the max character size of the div content..will that be reduced if i directly take title attribute of tag as i have the same data in both the tags?
formatter : function(cellvalue){ if(cellvalue == undefined || cellvalue == null) { cellvalue = ""; } return '' + cellvalue + ''; },
Or how can i reduce the performace of this code? Please help..
I have a table element with a border:
.summary-table {
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 115%;
overflow: auto;
width: 100%;
border: 1px solid rgb(195, 195, 195) !important;
border-radius: 4px;
overflow: hidden;
}
When i use background color on thead tr it works fine
.summary-table thead tr{
background-color: #E8E8E8 !important;
}
But when i use background color on thead th i get this (no border-top and left ):
.summary-table th {
background-color: #E8E8E8 !important;
font-weight: normal;
color: black;
padding: 20px 30px;
}
Can anyone tell nme why i get this?
I am trying to make a parallax page with HTML5 and CSS3. I need to make a vertical trapezoid without pseudo classes as the background might not be just a solid color. I am attaching an image to explain what I am looking for. Thanks in advance.
It is the static view of a menu page.That is made with col-md-4 and ul li.I want to convert it to wordpress page and want to make this menu dynamic.So that admin can change it from dashboard.What is the best way to make it customizable?custom post,widget......Please give me suggestion.
I'm using css & html to show/hide a few div's. (http://ift.tt/1eSrsuI)
I would like to extend this code with PREV and NEXT "buttons" which do exactly as is... So if DIV2 currently visible and hit the next button the jump to the DIV3...
Is it possible with CSS+HTML only?
<ul>
<li><a href="#div1">Div one</a></li>
<li><a href="#div2">Div two</a></li>
<li><a href="#div3">Div three</a></li>
<li><a href="#div4">Div four</a></li>
<li><a href="#">hide</a></li>
</ul>
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
#content > div {
display: none;
width: 50%;
margin: 0 auto;
}
#content > div:target {
display: block;
}
#content > div a.hide {
display: block;
text-align: right;
}
Recently I've noticed that most of the wordpress themes have this bug/issue with text overflowing.
Basically, the lines inside divs/sections aren't breaking where they should, they just go out of the box.
After reloading the page few times this is fixed tho. Any suggestion or idea how can this be avoided, so that it looks right at first page load?
On the image below you can see this happening with the twentyfifteen wordpress theme.
So, I'm in a sort of competition based on synthetic biology and we need a website in order to post our results and work and introduce our team. The system for this website is quite...convoluted to say the least. We're meant to use certain rules so that we can't edit our content after a certain date and...well I'm not so great at web design anyway. I've taken an html/css course, but this goes beyond that.
For some reason, we don't get to use an ftp server and upload things. If we want css or javascript, we have to write it... well... It's hard to explain. You can read it for yourself:
So basically, I take that as a copy/paste the javascript for lightbox into a new page and just fiddle with the links a bit and it will work. Right? Well it hasn't so far. I'm not going to paste everything here because it's pointless but here's what I've done:
Pasted the javascript from lightbox into a new website. Also pasted the lightbox css into our css and uploaded the overlay/exit/loading pictures onto the website and changed their links
Called that website using the script type thing from the "rules" page. Used a basic < a href="blahblah" rel="lightbox">< img src="blahblah" / >< /a >
It doesn't work.
I really can't think of what would be making this not work. When I put everything together it just gives me the picture as a link to the picture's web address. No lightbox. No overlay. Nothing.
I've never done a website like this before. I thought most of the time it was just uloading the different files onto a server and then using them. This is hard. Any tips would be greatly appreciated.
I've got a graphviz (2.38.0 (20140413.2041)) graph where each node contains a few lines of text and I'd like the different lines to be styled differently. Currently I have:
digraph G{
stylesheet = "styles.css";
graph[rankdir=BT];
node[shape=box];
Andrew[label=<
Andrew
<br />Red
<br />34
>];
James[label=<
James
<br />Yellow
<br />26
>];
Andrew -> James;
}
With stylesheet:
.name {
font-weight: bold;
}
.age{
color: blue;
}
And I'm hoping to be able to use a feature such as:
Andrew[label=<
<font class="name">Andrew</font>
<br />Red
<br /><font class="age">34</font>
>];
But unfortunately dot gives me:
Warning: Illegal attribute class in <FONT> - ignored
Warning: Illegal attribute class in <FONT> - ignored
I've had a search and couldn't find anything, so I'm not sure if there is preferred way of accomplishing what I'm trying to achieve (such as some sort of macro to generate repeated formatting) that I've missed.
I'm developing this site: esident.logotypefactory.com Everything is ok on desktops, phones. But when it comes to iPads the logo duplicates or something is wrong...
So try this:
1) Go to esident.logotypefactory.com on your iPad 2) Swipe to the left so the screen goes to the right, you will see the second logotype.
Why does it do like that? What am I doing wrong?
What I want:
1) Have a logo always on the top left side. 2) When you click on the menu, have the logo also there on same place.
What I think:
That the second logo is the logo that should be viewable when you click on the menu. As when you click on the menu, you can't "swipe" to see the second logo.
Please help me guys.
<div class="fusion-header"><div class="fusion-row"><div class="fusion-logo" data-margin-top="65px" data-margin-bottom="31px" data-margin-left="0px" data-margin-right="0px"> <a href="http://ift.tt/1M988Ig"> <img src="http://ift.tt/1ImH3v2" width="221" height="51" alt="Esident" class="fusion-logo-1x fusion-standard-logo"> <img src="http://ift.tt/1ImH3v2" width="221" height="51" alt="Esident" style="width:221px; max-height: 51px; height: auto;" class="fusion-standard-logo fusion-logo-2x"> <img src="http://ift.tt/1M988Ii" alt="Esident" class="fusion-logo-1x fusion-mobile-logo-1x"> <img src="http://ift.tt/1ImH3v2" alt="Esident" style="max-width:195px; max-height: 47px; height: auto;" class="fusion-logo-2x fusion-mobile-logo-2x"> </a></div><div class="fusion-mobile-menu-icons"><a href="#" class="fusion-icon fusion-icon-bars"></a></div><div class="fusion-mobile-nav-holder"></div></div></div>
.fusion-header {
padding-left: 30px;
padding-right: 30px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.fusion-header-v2 .fusion-header,
.fusion-header-v3 .fusion-header,
.fusion-header-v4 .fusion-header,
.fusion-header-v5 .fusion-header {
border-bottom: 1px solid transparent;
}
.fusion-logo {
float: left;
zoom: 1;
}
.fusion-logo:before,
.fusion-logo:after {
content: " ";
display: table;
}
.fusion-logo:after {
clear: both;
}
.fusion-logo a {
display: block;
}
.fusion-logo img {
width: auto;
}
.fusion-logo-2x {
display: none;
}
.fusion-mobile-logo-1x,
.fusion-mobile-logo-2x {
display: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
.fusion-standard-logo.fusion-logo-1x {
display: none;
}
.fusion-standard-logo.fusion-logo-2x {
display: inline-block;
}
}
.fusion-secondary-header {
min-height: 43px;
border-bottom: 1px solid transparent;
}
.fusion-secondary-header .fusion-alignleft {
float: left;
margin-right: 0;
}
.fusion-secondary-header .fusion-alignright {
float: right;
margin-left: 0;
}
.fusion-header-v2 .fusion-secondary-header {
border-top: 3px solid transparent;
}
.fusion-secondary-header .fusion-mobile-nav-holder {
width: 80%;
margin: 0 auto;
}
.fusion-header-separator {
padding: 0 6px;
}
.fusion-contact-info {
line-height: 43px;
}
.fusion-header-v4 .fusion-header {
padding-top: 30px;
padding-bottom: 30px;
}
.fusion-header-v4 .fusion-logo {
width: 100%;
}
.fusion-header-v4 .fusion-logo a {
float: left;
}
.fusion-header-v4 .searchform {
float: right;
margin-left: 15px;
}
.fusion-header-v4 .search-table {
width: 286px;
}
.fusion-header-tagline {
float: right;
margin: 0;
padding: 0;
line-height: 32px;
font-family: 'MuseoSlab500Regular', Arial, Helvetica, sans-serif;
font-weight: normal;
}
.fusion-header-banner {
float: right;
}
.fusion-logo .fusion-header-banner a {
float: none;
}
We just switched our WordPress-Site on an Azure Server.
For the development of our theme we use LESS CSS with the Client-Side JS file.
Since we switched, it says that the less file does not exist on our server - but it does. We have a .css file in the same folder and Azure can find the .css file.
This is the console output:
GET http://ift.tt/1DpvCGs 404 (Not Found)b.exports.g.doXHR @ less.js:13b.exports.g.loadFile @ less.js:13j @ less.js:13k @ less.js:13b.exports.n.refresh @ less.js:13b.exports.n.refresh @ less.js:132../add-default-options @ less.js:13e @ less.js:13a @ less.js:13(anonymous function) @ less.js:13i @ less.js:13(anonymous function) @ less.js:13 less.js:13
Uncaught (in promise) Object {type: "File", message: "'http://ift.tt/1DpvCGs' wasn't found (404)", href: "http://ift.tt/1DpvCGs"}
What can we do about this?
i've installed the foundation gem with the version 5.5.2.1. when i start the application i recive this error:
Showing /home/user/Scrivania/sites/store/app/views/layouts/application.html.erb where line #9 raised:
Incompatible units: 'rem' and 'px'.
following some other case on the internet i tried to change the file _settings.scss on my gem folder:
../../var/lib/gems/2.1.0/gems/foundation-rails-5.5.2.1/vendor/assets/stylesheets/foundation/_settings.css
i've commented these lines:
$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12;
and i've set my custom $base-font-size:
$base-font-size: 14px;
$rem-base: $base-font-size;
i don't wont to downgrade my gems so can you help me with this error?
I have simple but annoyed problem with animation-iteration-count. In my app i use animate.css and reactjs I want to add class animated flash to my element, when i set animation-iteration-count: 0 this work as i expected. I have a problem when i set 1 or more each time this multiply my animation count. For example when i set animation-iteration-count: 4 this gives me 8 times animation.
My Site component:
@Site = React.createClass
getInitialState: ->
articles: @props.site.articles
getDefaultState: ->
articles: []
shouldComponentUpdate: ->
$('.articles_wrapper').addClass 'animated flash'
allSite: ->
@props.all_site.map (site) =>
[site.id, site.name]
changeSite: (site) ->
#Load site articles from server
$.ajax
method: 'GET'
url: "sites/" + site
dataType: 'JSON'
data: site
success: (data) =>
#Displat new articles
@setState articles: data.articles
position: (article) ->
position = @state.articles.indexOf(article) + 1;
render: ->
React.DOM.div
className: 'site_wrapper'
React.createElement SiteForm, options: @allSite(), siteName: @props.site.name, handleChangeSite: @changeSite
React.DOM.div
className: 'row articles_wrapper'
id: 'site' + @props.site.id
for article in @state.articles
React.createElement Article, key: article.id, article: article, position: @position(article)
My css
.flash {
-moz-animation-iteration-count:1;
-moz-animation-delay: 0;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: ease-out;
animation-iteration-count: 1;
}
I have been fighting with this since yesterday evening, so any help will be awesome.
I made a codepen with snap svg: Codepen
I try to rotate a svg-gear in an endless-loop around his own centerpoint. This works on Internet Explorer, but fails on Mozilla-Firefox and Google-Chrome.
The center point in Chrome and Firefox seems wrong and so the gear move out of his position.
For the rotation i used following code:
function infRotate(el, time, cw) {
var box = el.getBBox();
el.transform('r0,' + box.cx + ',' + box.cy);
if (cw)
el.animate({transform: 'r360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
else
el.animate({transform: 'r-360,' + box.cx + ', ' + box.cy}, time, mina.linear, infRotate.bind(null, el, time, cw));
}
What i have to do for Firefox and Chrome to find right center point? Thanks for your help.
I want a select box with the font awesome icon and the name of the icon. I build my ListItems for the DropDownList in Code behind dynamically and want to show the icon with the unicode. Here is my output:
The decleration of the DropDownList looks like this:
<asp:DropDownList ID="ddl_Icons" CssClass="form-control select2 fontawesomeselect" runat="server"></asp:DropDownList>
The font-family should be correct but there is still no icon displayed. Any tips how I can display the icons?
I'm using select2 and have made two CSS classes containing the following code:
<style type="text/css">
.fontawesomeselect {
font-family: 'FontAwesome', 'Arial';
}
.select2-selection__rendered{
font-family: 'FontAwesome', 'Arial';
}
</style>
I have tried the below coding to slide my div up and down:
$("#toggle").click(function(e) {
e.preventDefault();
$("#numbers").slideToggle();
});
How do we let it to only slide until certain height for example half of my div?
Using bootstrap, I have a dropdown menu(s) inside a div with overflow:hidden, which is needed to be like this. This caused the dropdowns to be clipped by the container.
My question, how can I solve this clipping issue, e.g. change the container of all dropdowns inside my project to be body, with lowest cost possible?
this is an example of the code: http://ift.tt/1Hq03XT
I have a main header that is fixed to the top and I have a subnav (which on the real site is for anchor links within the page) which is fixed to the bottom of the window. I then have a hero image which is the height of the window minus the height of the header and minus the height of the subnav. When a user scrolls past the subnav at the bottom, it then sticks to the top just after the main navigation. This all works pretty well at the moment.
Here's an extracted version of how it works on the site that's under development: http://ift.tt/1MNOnVW.
However, the one bug is that when the window is resized, the subnav's position isn't recalculated and so ends up positioned either too high or too low.
I can refactor for the subnav's position by binding an additional window resize event:
// Refactor subnav measurements on window resize
$( window ).resize(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#subnav').outerHeight(true);
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
$('#subnav').css({'position':'fixed','top' :'80px'});
} else {
$('#subnav').css({'position':'absolute','top': stickToBot +'px'});
}
});
This works for the initial position, but after scrolling and then resizing the window, the positioning is incorrect: http://ift.tt/1K3ANbG
I know I'm missing something very obvious here but what is it?!
I'm new in programming, but I already have 4 months of experience. I'm good in HTML and starting to learn CSS. I want to make search engine like google, that can search in many websites and display the results quick
this is what I already did:
<div id="search_div">
<input type="text" placeholder="search" name="search">
</div>
how can I do the search? what else I need to know? is there's a ready code for this?
thanks a lot!
I have two divs the first one has full of Menu li elements and the second one has submenu. When I hover the menu li it should show the next div with CSS
li:hover{
//Display Submenu
}