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
}
hi dears i have a trouble problem in my query, please help me thanks for helping."You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'deff_month month) as b from teacher_hours_late, teacher where teacher.teacher_' at line 1"
$this->db->select("teacher.teacher_id,name,lname,father_name,salary_per_hour,monthly_salary,"
. "(select ($user_month - month(salary_start_date)) from teacher)as deff_month ,"
. "(select ADDDATE(salary_start_date, interval deff_month month) from teacher) as start_interval,"
. " (select ADDDATE(start_interval, interval 1 month)) as end_interval ,"
. "(select DATE_SUB(start_interval, interval 1 month)) as reverse_end_interval,"
. "(select date($miladi)) as user_date,(select sum(hours) from teacher_hours_late where (date>start_interval AND date<=end_interval AND start_interval<$miladi ) OR (date<=start_interval AND date>reverse_end_interval AND start_interval>=$miladi )) as total_late");
$this->db->from('teacher');
$this->db->join('teacher_hours_late',"teacher.teacher_id=teacher_hours_late.teacher_id", 'inner');
$this->db->where('teacher.branch_id',$branch_id);
$query=$this->db->get();
return $query->result();
I have the following code which choose all rows in MYSQL but it show the last row only
$query = mysql_query("SELECT * FROM `users`") or die(mysql_error());
while ( $row = mysql_fetch_assoc($query) )
{
$token = $row['instagram_access_token'];
}
echo "$token";
I am Searching for, Passing List bean objects into mysql Procedure , using spring and hibernate, Then how to use that list object inside mysql procedure, please provide any example.
I have a table set up with an auto increasing ID. Lets say I have the IDs 1, 2, 3, 4 and 5. When I remove ID number 3, I want ID 4 to drop down to 3, and ID 5 to drop down to 4.
Is this possible? How is this done?
Hey I have an search field where I am searching something from my database, now I saw the problem after testing that if I put "%" in the search field it will output everything that I have ready for searching. Is there a way to disable this?
<h3>Search Share Details</h3>
<p>You may search either by company name or issue date</p>
<form name = "search" method = "get">
<input type = "text" name = "share" size = "40" maxlength="50">
<input type = "submit" value = "Search">
</form>
Getting contents connecting to DB, fetching results and printing
function get_contents() {
if(isset($_GET['share']))
{
$conn = db_connect();
$shares = get_shareSearch($conn);
db_disconnect($conn);
$contents = array('shares' => $shares);
return $contents;
}
else
{
$conn = db_connect();
$shares = get_share($conn);
db_disconnect($conn);
$contents = array('shares' => $shares);
return $contents;
}
}
function print_contents($contents)
{
if(count($contents['shares']) == 0)
{
echo "<script type = 'text/javascript'>alert('Sorry but share is not found! Q_Q');</script>";
}
else
{
?>
<table>
<tr>
<th>Company Name</th>
<th>Rate</th>
<th>Issue Date</th>
</tr>
<?php
foreach ($contents['shares'] as $share)
{
print "<tr>";
$identifier = urlencode($share['SHAREID']);
print "<td><a href='share-details.php?id={$identifier}'>{$share['COMPANY']}</a></td>";
print "<td>{$share['RATE']}</td>";
$issue_date = $share['ISSUE_DATE'];
$issue_date = $issue_date === NULL ? "< not available >" : $issue_date;
print "<td>{$issue_date}</td>";
print "</tr>";
}
?>
</table>
<?php
}
}
//require("shares.php");
require("search.php");
?>
Query itself
function get_shareSearch($conn) {
$id = "";
if(isset($_GET['share'])){$id = $_GET['share'];}
$statement = db_create_statement($conn, "SELECT DISTINCT * FROM shares WHERE(company LIKE '{$id}' OR issue_date LIKE '{$id}')");
$resultset = db_fetch_resultset($statement);
return $resultset;
}
i have two table from mysql.
1, photo (url_link)
2, video(url_link)
i wanna fetch only 1 table (video url) if both table aren't empty.. Is there anyways? am using code below:
<--photo -->
<?php
$query_img = mysql_query("SELECT `url` FROM `photos_news` WHERE title='{$thumn_content['titles']}' LIMIT 0,1");
while($img = mysql_fetch_array($query_img)){ ?>
<img src="<?php echo $img['url'];?>" class="img-responsive img-rounded"/>
<?php }?>
<!-- vdo -->
<?php
$query_vdo = mysql_query("SELECT `url` FROM `video_news` WHERE title='{$thumn_content['titles']}' LIMIT 0,1");
while($vdo = mysql_fetch_array($query_vdo)){ ?>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="<?php echo $vdo['url']?>?modestbranding=1&showinfo=0&fs=0"></iframe>
</div>
<?php }?>
thank you sir,
I can't figure out how to get this done. Basically I am making message system, I have this table:
Basically I am trying to print out threads, like every distinct msgfrom is a new thread. Thread should basically say:
[(Sender Name) (Last Message (ORDER BY id DESC)) ([if at least one message has msgread=0 then say You have unread messages])
I've tried this so far:
SELECT id, msgfrom, message, date,
IF(msgread='0', 'unread', 'read') AS msr
FROM pmessages WHERE msgto=$userId GROUP BY msgfrom
But that returns:
message from: Username (this is msgfrom 1)
read
message from: Username (this is msgfrom 2)
unread
Even though msgfrom1 has 1 unread message, it says read (I assume it takes first result). So in basic:
SELECT UNIQUE msgrom
ORDER BY id DESC
IF at least ONE msgread = 0
return * + set msgread=0 (unread)
It's a bit hard to explain, sorry if it's a bit unclear.
i am new to php. i have downloaded xampp control panel and installed it but when i run the control panel.it showing this error.please help me.
i have changed port id and PID also but same problem.
i have deleted total xampp and installed fro3 times till ow but same problem. [Apache] You need to uninstall/disable/reconfigure the blocking application [Apache] or reconfigure Apache and the Control Panel to listen on a different port [Apache] Problem detected! [Apache] Port 443 in use by "Unable to open process" with PID 1444! [Apache] Apache WILL NOT start without the configured ports free! [Apache] You need to uninstall/disable/reconfigure the blocking application [Apache] or reconfigure Apache and the Control Panel to listen on a different port.
I'm trying to use a form to update a sql table by first getting its data (editrower.php) and setting that as values in the form, then using the form to update the table (update_contactrequest.php) but it returns saying the rower was updated yet the table does not update.
editrower.php
<?php
require('login.php');
?>
<?php
include 'php/mysql_connect.php';
if(isset($_GET['id'])){
$q = $db->prepare('SELECT * FROM rowercontacts WHERE id=:id LIMIT 1');
$q->execute(array(':id'=>$_GET['id']));
$row = $q->fetch(PDO::FETCH_ASSOC);
if($row){
echo '
<form method="post" action="php/update_contactrequest.php"><div class="col-xs-9 col-md-6 col-lg-6">
<div class="form-group">
<input type="hidden" name="id" id="id" value="'.$_GET['id'].'">
<label for="firstname">First Name</label>
<input type"text" class="form-control" name="firstname" placeholder="First Name" value="'.$row['firstname'].'" />
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" name="lastname" placeholder="Last Name" value="'.$row['lastname'].'" />
</div>
<div class="form-group">
<label for="address">Home Address</label>
<input type="text" class="form-control" name="address" placeholder="Address" value="'.$row['address'].'" />
</div>
<div class="form-group">
<label for="city">City</label>
<input type="text" class="form-control" name="city" placeholder="City" value="'.$row['city'].'" />
</div>
<div class="form-group">
<label for="zip">Zip Code</label>
<input type="text" class="form-control" name="zip" placeholder="Zip" value="'.$row['zip'].'" />
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" class="form-control" name="email" placeholder="Your Email" value="'.$row['email'].'" />
</div>
<div class="form-group">
<label for="cellphone">Cell Phone Number</label>
<input type="text" class="form-control" name="cell" placeholder="Cell Number" value="'.$row['cell'].'" />
</div>
<div class="form-group">
<label for="homephone">Home Phone Number</label>
<input type="text" class="form-control" name="home" placeholder="Home Phone Number" value="'.$row['home'].'"/>
</div>
<br><br>
<div>
<h3>Parent/Guardian Information</h3>
<br>
</div>
<h4>Parent/Guardian 1</h4>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="p1name" placeholder="Guardian 1 Name" value="'.$row['p1name'].'" />
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="p1email" placeholder="Guardian 1 Email" value="'.$row['p1email'].'" />
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="p1phone" placeholder="Guardian 1 Phone" value="'.$row['p1phone'].'" />
</div>
<div class="form-group">
<label>Occupation</label>
<input type="text" class="form-control" name="p1occupation" placeholder="Guardian 1 Occupation" value="'.$row['p1occupation'].'" />
</div>
<div class="form-group">
<label>Relation</label>
<input type="text" class="form-control" name="p1relation" placeholder="mother, father, etc." value="'.$row['p1relation'].'" />
</div>
<br>
<h4>Parent/Guardian 2</h4>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" name="p2name" placeholder="Guardian 2 Name" value="'.$row['p2name'].'" />
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" name="p2email" placeholder="Guardian 2 Email" value="'.$row['p2email'].'" />
</div>
<div class="form-group">
<label>Phone</label>
<input type="text" class="form-control" name="p2phone" placeholder="Guardian 2 Phone" value="'.$row['p2phone'].'" />
</div>
<div class="form-group">
<label>Occupation</label>
<input type="text" class="form-control" name="p2occupation" placeholder="Guardian 2 Occupation" value="'.$row['p2occupation'].'" />
</div>
<div class="form-group">
<label>Relation</label>
<input type="text" class="form-control" name="p2relation" placeholder="mother, father, etc." value="'.$row['p2relation'].'" />
</div>
<br>
<div class="form-group">
<textarea class="form-control" rows="3" name="extrainformation" placeholder="Additional Info (parent work phone numbers, health information, etc.)">'.$row['extrainformation'].'</textarea>
</div>
<br>
<small>Any additional parents/guardians who wish to be notified of updates can request under the "contact" section</small>
<br><br>
<input type="submit" class="btn btn-default" value="Update" />
</div></form>
';
}
else{
echo 'No rower found';
}
}
else{
echo 'No rower found';
}
?>
update_contactrequest.php:
<?php
session_start();
if($_SESSION['loggedIn'] == true){
$rower_id= $_POST['id'];
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
$address = $_POST['address'];
$city = $_POST['city'];
$zip = $_POST['zip'];
$email = $_POST['email'];
$cell = $_POST['cell'];
$home = $_POST['home'];
$p1name = $_POST['p1name'];
$p1email = $_POST['p1email'];
$p1phone = $_POST['p1phone'];
$p1occupation = $_POST['p1occupation'];
$p1relation = $_POST['p1relation'];
$p2name = $_POST['p2name'];
$p2email = $_POST['p2email'];
$p2phone = $_POST['p2phone'];
$p2occupation = $_POST['p2occupation'];
$p2relation = $_POST['p2relation'];
$extrainformation = $_POST['extrainformation'];
// connection to the database
try {
$bdd = new PDO('mysql:host=localhost;dbname=home','username','password');
} catch(Exception $e) {
exit('Unable to connect to database.');
}
// insert the records
$sql = "UPDATE rowercontacts SET firstname=:firstname, lastname=:lastname, address=:address, city=:city, zip=:zip, email=:email, cell=:cell, home=:home, p1name=:p1name, p1email=:p1email, p1phone=:p1phone, p1occupation=:p1occupation, p1relation=:p1relation, p2name=:p2name, p2email=:p2email, p2phone=:p2phone, p2occupation=:p2occupation, p2relation=:p2relation, extrainformation=:extrainformation WHERE id=:rower_id";
$q = $bdd->prepare($sql);
if($q->execute(array(':firstname'=>$firstname, ':lastname'=>$lastname, ':address'=>$address, ':city'=>$city, ':zip'=>$zip, ':email'=>$email, ':cell'=>$cell, ':home'=>$home, ':p1name'=>$p1name, ':p1email'=>$p1email, ':p1phone'=>$p1phone, ':p1occupation'=>$p1occupation, ':p1relation'=>$p1relation, ':p2name'=>$p2name, ':p2email'=>$p2email, ':p2phone'=>$p2phone, ':p2occupation'=>$p2occupation, ':p2relation'=>$p2relation, ':extrainformation'=>$extrainformation, ':rower_id'=>$id))){
echo '<script type="text/javascript">alert("Rower Updated.");location.href="../rowerlist.php";</script>';
}
else{
echo '<script type="text/javascript">alert("Something went wrong...");location.href="../rowerlist.php";</script>';
}
}
?>
I have a bunch of virtual host subdomains that use the same source code. Each subdomain has a row in a settings table that has the settings for the subdomain. These settings determine things like what html template to load, age rating and around 30 other settings so they are vital. Rather than query the DB every single time a page is loaded, I want to find a way to save the data for the duration of the session to reduce the load on the DB.
If i use sessions i can query the DB if the session doesnt exist and save the contents of the query to the session where i can then use the values on each page load to determine how the page should be displayed. The question here is will a huge amount of session variables for all users create a performance hit?
Alternatively i was thinking i could query the DB and save the contents of the array to a file as JSON.I could then read the file upon each page load to get the settings. This could be refreshed every hour or so and could be shared across all users on each subdomain. The issue here is will a massive amount of requests to a single json file hurt disk performance?
I've built a MVC 'framework' for learning purposes, and I'm struggling with this problem:
I am working on a CRUD application and I don't know how I should delete the records of my database, right now I'am doing it thru URL.
http://ift.tt/1GuzK8c that is how I delete a record of a database. But I don't really like this way, because anyone could unintentionally delete database records or intentionally do it, so my question is, how should I implement this feature?
Thank you in advance!
I want to select all the tables which doesn't contain the character '_' from a database, for this I used the request :
SELECT TABLE_NAME FROM INFORMATION_SCHEMA.TABLES WHERE table_schema="DB_NAME" and TABLE_NAME NOT LIKE '%_%' ;
And it doesnt seem to work . How can proceed ?
I know other posts talk about this, but I haven't been able to apply anything to this situation.
This is what I have so far. "SELECT * FROM ccParts, ccChild, ccFamily WHERE parGC ='26' AND parChild = chiId AND chiFamily = famId ORDER BY famName, chiName"
What I need to do is see the total number of ccParts with the same ccFamily in the results. Then, sort by the total.
I have a database where a java program is erroring out because there are non-xml characters in the mysql database. I would like to know how to do a regex to find the records that have non-valid XML characters. I could not find a query to run anywhere on the web.
I have a limited understanding of MySQL's interaction with my CentOS 7 server and need some help.
Basically, I have a WordPress installation and I need to set the uploads directory and all directories within to CHMOD 777 to upload images via the backend. CHMOD 775 doensn't work though. This baffled me and is something I am not willing to do as I unserstand the risks and how easily it can be exploited. I would be giving public write permissions in that folder and that is bad right?
My database user has privileges to the database and the database connects. The website works minus writing part. Now what I don't understand is how the MySQL user relates to the local CentOS user at all. I don't believe that is linked anywhere and if I am wrong how would i do that?
The reason I am thinking this is due to the CHMOD 775 not working meaning that the said database user is not a user or a member of the group required to have said access and to be able to write. Hence why I need local write permissions enabled.
===================================================
Local User Directory: /home - CHMOD 755, CHOWN root:root
Local Users /home/usr1 - CHMOD 501, CHOWN usr1:usr1 ,/home/usr2 - CHMOD 501, CHOWN usr2:usr2
Contains Website WWW: /home/usr1/www - CHMOD 775, CHOWN usr1:usr1 ,/home/usr2/www - CHMOD 775, CHOWN usr2:usr2
Rest of Files/Directories: CHOWN usr1:usr1 for all files in WWW ,CHOWN usr2:usr2 for all files in his respective WWW
CHOWN 775 for all directories in WWW
So when I connect the database to the wordpress installation, how in the heck does it know to use root, usr1 or usr2. I tried putting them all in a group to see what happens but it didn't work. Thought it was worth a shot.
Any help, advice, education and so and so forth is appreciated. Help me if you can please :)
==================================================
code need to be fix it my query is working all is good i have diffrent dates,rooms,count datefrom and count rooms in rows but $maxrooms is is not working any suggestions
$maxRooms1 =4;
$maxRooms2 =5;
$maxRooms3 = 5;
dates are dates between start and end dates to make clear.
$fetchQuery = " SELECT dates, rooms, COUNT( dates ) , COUNT( rooms )
FROM calendar3
GROUP BY rooms, dates";
$fetchResult = mysql_query($fetchQuery);
$count = mysql_num_rows($fetchResult)and $dates = mysql_num_rows($fetchResult);
if ($row['COUNT(rooms1)'] and $row['COUNT(dates)'] <= $maxRooms1 ){
echo "</br>"."1 bed is not available!";
} elseif ($row['COUNT(rooms1)'] and $row['COUNT(dates)'] > $maxRooms1 ) {
echo "</br>"."1 bed is available !";
}
if ($row['COUNT(rooms2)'] and $row['COUNT(dates)'] <= $maxRooms2 ){
echo "</br>"."2 bed is not available!";
} elseif ($row['COUNT(rooms2)'] and $row['COUNT(dates)'] > $maxRooms2 ) {
echo "</br>"."2 bed is available !";
}
if ($row['COUNT(rooms3)'] and $row['COUNT(dates)'] <= $maxRooms3 ){
echo "</br>"."3 bed is not available!";
} elseif ($row['COUNT(rooms3)'] and $row['COUNT(dates)'] > $maxRooms3 ) {
echo "</br>"."3 bed is available !";
}
table structure for table calendar3 -- CREATE TABLE calendar3 ( id int(11) NOT NULL AUTO_INCREMENT, dates date NOT NULL, dateto date NOT NULL, rooms int(11) NOT NULL, KEY id (id) ) ENGINE=InnoDB AUTO_INCREMENT=276 DEFAULT CHARSET=latin1 AUTO_INCREMENT=276 ; -- -- Dumping data for table calendar3 -- INSERT INTO calendar3 VALUES (272, '2015-12-12', '0000-00-00', 1); INSERT INTO calendar3 VALUES (273, '2015-12-13', '0000-00-00', 1); –
I have created a test procedure (for the sake of example to get this working) called test_proc like below -
DELIMITER $$
CREATE DEFINER=`tloken`@`%` PROCEDURE `test_proc`(In user_id varchar(100), OUT message varchar(1000))
BEGIN
set message ='OK';
END
and calling it from php test page like below -
$sso = $_GET['sso'];
$ret = '';
echo $RepExecutQry = "call test_proc(?, ?)";
$stmt = $conn->Prepare($RepExecutQry);
$stmt->bindParam(1, $sso, PDO::PARAM_INT, 10);
$stmt->bindParam(2, $ret, PDO::PARAM_STR|PDO::PARAM_INPUT_OUTPUT, 32);
$stmt->execute();
print "Values of bound parameters _after_ CALL:\n";
print " 1: {$ret} 2: {$sso}\n"
Also tried the solution with bindValue(), but the procedure doesn't return anything. $conn is a pdo connection object and created properly, tested with var_dump($conn) already. Sorry to create the duplicate question, but all other suggestions on the forum for similar problem I tried already and they were not working. any suggestions would be valued and appreciated. Thank you
i have this table name = text_tab
_________________________
| id | message |
| 1 | aaa |
| 2 | bb |
| 3 | ffff |
| 4 | ooooooo |
| 5 | gg |
I want to check row that data in column message have max char. And column message is type text.
in my answer will show id=4
I use order by message desc but not work, How can i do that ?
i have a Question & Answer website as a part of my graduation project , so am still fresh to such languages but i will try to be specific as much as i can ,,, well i got voting for both Question and answers at each special question page ,, i use the same voting code with changing queries to retrieve desired data ,, but the problem is one of the voting system only works (Question voting or Answers voting) i suppose the problem is action listener is listen to the same btn or the span or smth like that i tried to change values but without any mentioned result,, i will provide all the code am using and am ready to replay to any comment to make stuff clear so i hope you guys help me out to make both voting systems work in the same page ,, thnx you very much ... ^^
srip.js > script for questions
$(document).ready(function(){
// ajax setup
$.ajaxSetup({
url: 'ajaxvote.php',
type: 'POST',
cache: 'false'
});
// any voting button (up/down) clicked event
$('.vote').click(function(){
var self = $(this); // cache $this
var action = self.data('action'); // grab action data up/down
var parent = self.parent().parent(); // grab grand parent .item
var postid = parent.data('postid'); // grab post id from data-postid
var score = parent.data('score'); // grab score form data-score
// only works where is no disabled class
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'up') {
// increase vote score and color to orange
parent.find('.vote-score').html(++score).css({'color':'orange'});
// change vote up button color to orange
self.css({'color':'orange'});
// send ajax request with post id & action
$.ajax({data: {'postid' : postid, 'action' : 'up'}});
}
// voting down action
else if (action == 'down'){
// decrease vote score and color to red
parent.find('.vote-score').html(--score).css({'color':'red'});
// change vote up button color to red
self.css({'color':'red'});
// send ajax request
$.ajax({data: {'postid' : postid, 'action' : 'down'}});
};
// add disabled class with .item
parent.addClass('.disabled');
};
});
});
ajaxvote.php for opertion inside the questions
<?php
include('config.php');
# start new session
dbConnect();
session_start(); /* changes will occuar here */
if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
if (isset($_POST['postid']) AND isset($_POST['action'])) {
$postId = (int) mysql_real_escape_string($_POST['postid']);
# check if already voted, if found voted then return
//if (isset($_SESSION['vote'][$postId])) return;
# connect mysql db
dbConnect();
# query into db table to know current voting score
$query = mysql_query("
SELECT rate
from qa
WHERE id = '{$postId}'
LIMIT 1" ); /* changes will occuar here */
# increase or dicrease voting score
if ($data = mysql_fetch_array($query)) {
if ($_POST['action'] === 'up'){
$vote = ++$data['rate'];
} else {
$vote = --$data['rate'];
}
# update new voting score
mysql_query("
UPDATE qa
SET rate = '{$vote}'
WHERE id = '{$postId}' "); /* changes will occuar here */
# set session with post id as true
$_SESSION['vote'][$postId] = true;
# close db connection
dbConnect(false);
}
}
}
?>
printing code : QR.php
<?php
require ("coonection.php");
if(isset($_GET['start']) )
{
$FURL = $_GET['start'];
$data=mysql_query("SELECT * FROM qa WHERE id=($FURL)");
while($d=mysql_fetch_assoc($data)) { ?>
<div class="item" data-postid="<?php echo $d['id'] ?>" data-score="<?php echo $d['rate'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="glyphicon glyphicon-thumbs-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $d['rate'] ?></div>
<div class="vote" data-action="down" title="Vote down">
<i class="glyphicon glyphicon-thumbs-down"></i>
</div><!--vote down-->
</div>
<div class="title"><!-- post data -->
<p><?php echo $d['question'] ?></p>
</div>
</div><!--item-->
<?php } } ?>
</div>
</p>
</div>
<div class="single-post-title" align="center">
<h2>Answers</h2>
</div>
<!-- Comments -->
<?php
require ("coonection.php");
if(isset($_GET['start']) )
{
$FURL = $_GET['start'];
$data=mysql_query("SELECT * FROM answers WHERE question_id=($FURL)");
while($d = mysql_fetch_assoc($data))
{
echo'<div class="shop-item">';
echo'<ul class="post-comments">';
echo'<li>';
echo'<div class="comment-wrapper">';
echo'<h3>';
echo $d['answerer'] ;
echo'</h3>';
echo '</div>'; ?>
<div class="item" data-postid="<?php echo $d['answer_id'] ?>" data-score="<?php echo $d['rate'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $d['rate'] ?></div>
<div class="vote" data-action="down" title="Vote down">
<i class="icon-chevron-down"></i>
</div><!--vote down-->
</div>
<div class="post"><!-- post data -->
<p><?php echo $d['answer'] ?></p>
</div>
</div><!--item-->
<?php
echo'<div class="comment-actions"> <span class="comment-date">';
echo $d['dnt'] ;
echo'</div>';
echo'</li>';
echo'</ul>';
echo'</div>';
}
}
?>
i got ajaxvote2.php and also got scrip2.js for settings in answer ,,, i think using the same code make the printing page confused and only listen to one of voting systems
i will add ajaxvote2.php and scrip2.js just in case some one need to look at them ...
ajaxvote2.php
<?php
include('config.php');
# start new session
dbConnect();
session_start(); /* changes will occuar here */
if ($_SERVER['HTTP_X_REQUESTED_WITH']) {
if (isset($_POST['postid']) AND isset($_POST['action'])) {
$postId = (int) mysql_real_escape_string($_POST['postid']);
# check if already voted, if found voted then return
//if (isset($_SESSION['vote'][$postId])) return;
# connect mysql db
dbConnect();
# query into db table to know current voting score
$query = mysql_query("
SELECT rate
from answers
WHERE answer_id = '{$postId}'
LIMIT 1" ); /* changes will occuar here */
# increase or dicrease voting score
if ($data = mysql_fetch_array($query)) {
if ($_POST['action'] === 'up'){
$vote = ++$data['rate'];
} else {
$vote = --$data['rate'];
}
# update new voting score
mysql_query("
UPDATE answers
SET rate = '{$vote}'
WHERE answer_id = '{$postId}' "); /* changes will occuar here */
# set session with post id as true
$_SESSION['vote'][$postId] = true;
# close db connection
dbConnect(false);
}
}
}
?>
scrip2.js
$(document).ready(function(){
// ajax setup
$.ajaxSetup({
url: 'ajaxvote2.php',
type: 'POST',
cache: 'false'
});
// any voting button (up/down) clicked event
$('.vote').click(function(){
var self = $(this); // cache $this
var action = self.data('action'); // grab action data up/down
var parent = self.parent().parent(); // grab grand parent .item
var postid = parent.data('postid'); // grab post id from data-postid
var score = parent.data('score'); // grab score form data-score
// only works where is no disabled class
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'up') {
// increase vote score and color to orange
parent.find('.vote-score').html(++score).css({'color':'orange'});
// change vote up button color to orange
self.css({'color':'orange'});
// send ajax request with post id & action
$.ajax({data: {'postid' : postid, 'action' : 'up'}});
}
// voting down action
else if (action == 'down'){
// decrease vote score and color to red
parent.find('.vote-score').html(--score).css({'color':'red'});
// change vote up button color to red
self.css({'color':'red'});
// send ajax request
$.ajax({data: {'postid' : postid, 'action' : 'down'}});
};
// add disabled class with .item
parent.addClass('.disabled');
};
});
});