I have 2 div.
BODY
<div class="div1"></div>
<div class="div2"></div>
And I´m trying to assign to put the SAME HEIGHT to both linked to the content (dynamic content from database with PHP)
HEADER
<script>
$(document).ready(function() {
var divHeightdiv1= $(".div1").height();
var divHeightdiv2 = $(".div2").height();
if(divHeightdiv1 > divHeightdiv2)
{
$(".div2").height(divHeightdiv1);
}
else
{
$(".div1").height(divHeightdiv2);
}
});
</script>
STYLE
.div1, .div2
{
border: 1px solid black;
}
Works perfect for DESKTOP computer, but not for mobiles.
Anyone knows WHY?
Note: Excuse any error product of rewriting here the code.
THANKS!
You may want to give it a try with pure CSS (without using jQuery)
The HTML
<div class="layout">
<div class="rows">
<div class="column div1"></div>
<div class="column div2"></div>
</div>
</div>
The CSS
.layout {
display: table;
}
.layout .rows {
display: table-row;
}
.layout .rows .column {
display: table-cell;
border:1px solid #000;
}
Related
this is my fiddle with html and css: http://jsfiddle.net/v2r5we0r/
I'm trying to show a DIV "station_info"(shape of a square) when either clicked/hovered on those DIVs "boxes" right next to it (it will have information from my database table that I will put later on).
I have my PHP posted since I'm looping through my DB to create those boxes.
Is it possible using only CSS and HTML? If so, how can i? I only find examples with Jquery, I don't want to use JQuery or Javascript.
Scroll down the Result in fiddle to see the smalss boxes
Thank you in advance.
HTML:
<body>
<div id="map_size" align="center">
<div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84
<div class='station_info'>Hello</div></div>
</div> <!-- end div map_Size -->
</body>
CSS:
/*body*/
body{
margin:0px auto;
width:80%;
height:80%;
}
/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}
/* desk boxes*/
.desk_box{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box > .station_info{
display:none;
}
.desk_box > .station_info:first-child{
display:block;
}
.desk_box > div:hover + div {
display: block;
}
PHP:
<?php
include 'db_conn.php';
//query to get X,Y coordinates from DB
$coord_sql = "SELECT coordinate_id, x_coord, y_coord FROM coordinates";
$coord_result = mysqli_query($conn,$coord_sql);
//see if query is good
if($coord_result === false) {
die(mysqli_error());
}
?>
<div id="map_size" align="center">
<?php
//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){
//naming X,Y values
$x_id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
echo "<div class='desk_box' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>id:".$x_id."<div class='station_info'>Hello</div></div>";
} //end while coord_result loop
?>
</div>
CSS can only work descending or going further in the same level in the DOM tree, so you'll have to put the div you wanna hide/show on hover AFTER all the DIVs you're going to hover. Then you can use the general sibling operator: ~ which looks for elements AFTER a given element.
Say you have
.toto ~ .titi {}
then those <div class="titi"> will match
<div class="toto"><div>
<div class="titi"></div>
Or
<div class="toto"></div>
<div class="whatever"></div>
<div class="titi"></div>
But this one won't
<div class="titi"></div>
<div class="toto"></div>
Here's a snippet to see if this is what you want.
/*body*/
body{
margin:0px auto;
width:80%;
height:80%;
}
/*map size*/
#map_size{
width:1190px;
height:1300px;
background:#0099FF;
border-style: solid;
border-color: black;
position: relative;
}
/* desk boxes*/
.desk_box{
width: 23px;
height: 10px;
border: 4px solid black;
padding:10px;
}
.desk_box > .station_info{
display:none;
}
.desk_box > .station_info:first-child{
display:block;
}
.desk_box > div:hover + div {
display: block
}
.div-to-show {
display: none;
}
.desk_box:hover ~ .div-to-show {
display: block;
}
<div id="map_size" align="center">
<div class='desk_box' style='position:absolute;left:20px;top:1230px;'>id:84<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1165px;'>id:85<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1100px;'>id:86<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:20px;top:1035px;'>id:87<div class='station_info'>Hello</div></div>
<div class='desk_box' style='position:absolute;left:73px;top:1230px;'>id:92<div class='station_info'>Hello</div></div>
<div class="div-to-show" style="position: absolute; left:150px; bottom: 100px;">Oh hi !</div>
</div> <!-- end div map_Size -->
I have this HTML:
<div class="dashboard_wrap">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
that displays 3 divs, here is the CSS:
.dashboard_wrap {
padding:10px;
}
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
width: 50%;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_clear:after {
content: "";
display: table;
clear: both;
}
#media all and (max-width: 700px) {
div.wrap div {
width: 100%;
float: none;
}
}
I am using PHP so only certain users can see certain divs. If a user can only see the first 2 divs, how can i make them 50% each rather than 40%?
There is no need to use php or javascript for this. You can use basic html and css for this.
You can check the html fiddle for this: http://jsfiddle.net/4WaX4/1/
All the css which you need is this:
.dashboard_wrap {
display:table;
min-width:500px;
background:#00ff00;
}
.dashboard_items {
display:table-row;
}
.dashboard_items div{
display:table-cell;
border:1px solid #ff0000;
}
#media all and (max-width: 700px) {
div.dashboard_items div {
width: 100%;
display:block;
}
}
And the html looks as follows:
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
</div>
</div>
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
</div>
Very simpel and quick. When you resize the result window in jsfiddle you see that the divs become 100% relative to the outer div (500px).
I hope this is the solution youre looking for...
You can specify the class of the wrapper based on the number of items inside.
CSS classes for each variant will handle the style automatically.
If however the number of divs can extend beyond expected numbers, then dynamic inline styles may be your solution.
<div class="dashboard_wrap has3">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
<div class="dashboard_wrap has2">
<div>orders</div>
<div>porting</div>
</div>
<style>
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_wrap.has2 div {
width: 50%;
}
.dashboard_wrap.has3 div {
width: 33%;
}
</style>
When the page gets rendered, only two divs will be visible. What you need to do is use a client-based language i.e. javascript or jQuery, to manipulate what is visible on screen.
Use a simple check to see what divs are visible or use php to generate a value which you can hide in the page to make it easier to resize the divs like:
<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />
then using jQuery:
$(document).ready(function() {
var divsvis = $("#divs_visible").val();
if(divsvis == 2)
{
// resize the divs
}
});
EDIT
You can also render all the divs, then using jQuery and the value you've placed in the hidden input, you can simply hide the div you do not need with:
$("#div_to_be_hidden").hide();
i have a problem
i'm trying to edit a website
it has a scroller (behavior is like a inverted waterfall)
the website shows events (data) already recorded in the database...
i want to change the font size of the scroller, i tried to change all the labels there and nothing.
this is the CSS block
<style type="text/css">
body {
font-family: "Engravers MT", "Engravers MT",sans-serif;
line-height: 1em;
color: #f0edd9;
font-weight:bold;
font-size: 40px;
background-color:#8A0829;
}
pscroller1{
width: 500px;
height: 560px;
font-family: "old republic", "old republic";
font-size:50px;
border: 1px solid black;
padding: 5px;
background: red;
}
</style>
this is the scroller, i didn't do that, it was made by someone else.
<script type="text/javascript">
var pausecontent=new Array()
</script>
<script type="text/javascript">
function pausescroller(content, divId, divClass, delay){
this.content=content //message array content
this.tickerid=divId //ID of ticker div to display information
this.delay=delay //Delay between msg change, in miliseconds.
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
this.hiddendivpointer=1 //index of message array for hidden div
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
var scrollerinstance=this
if (window.addEventListener) //run onload in DOM2 browsers
window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
else if (window.attachEvent) //run onload in IE5.5+
window.attachEvent("onload", function(){scrollerinstance.initialize()})
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
setTimeout(function(){scrollerinstance.initialize()}, 500)
}
here is how it set the message in the scroller
pausescroller.prototype.setmessage=function(){
var scrollerinstance=this
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
setTimeout(function(){scrollerinstance.setmessage()}, 100)
else{
var i=this.hiddendivpointer
var ceiling=this.content.length
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
this.animateup()
}
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
if (tickerobj.currentStyle)
return tickerobj.currentStyle["paddingTop"]
else if (window.getComputedStyle) //if DOM2
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
else
return 0
}
this is the body:
<body>
<!--<div align="center">
<img src="picture1.fw.png" align="absmiddle"/>
</div>
!-->
<div align="LEFT" style="width:1000px ">
<div style="height:570px; width:50%; float:right; background-color:#8A0829">
<?php
require_once('functions.php');
$phparray=events();
for($i=0; $i <count($phparray); $i++ )
{
echo '<script language="JavaScript"> pausecontent['.$i.'] = "'.$phparray[$i].'";</script>';
}
?>
<script type="text/javascript" >
document.writeln("EVENTS")
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("<br />")
function refresh(time) {setTimeout("location.reload(true);",time);}
refresh(43200000); </script>
</div>
</div>
<div align="right"> EVENTS</div>
<div align="center" style="height:570px; width:300px; float:LEFT; background- color:#8A0829">
<embed src="video.vob" autostart="true" loop ="true" width="500" height="570" >
</div>
</div>
<div align="center">
<img src="background.jpg" align="absmiddle"/>
</div>
</body>
like you can see in the
new pausescroller(pausecontent, "pscroller1", "", 5000)
document.write("")
the pscroller1 should change the font color and size of the pausecontent but it does only change the style of the font of the data, although the return data of document.write (UNDEFINED) is working fine, it's size, style and color can be changed
pscroller1 is not an html entity. You cannot style it like that.
You can add an ID or a class to the 'pscroller' and style that
a{ <- html entity
.someClass{ <- styling a class
#someID{ <- styling an ID
I'm developing the news feed by using jquery and php. I'm using 2 div for this.
Here If the main div reached at the bottom It should wrap automatically.
<html>
<div id="main">
<?php
for($i=0;$i<15;$i++)
{
?>
<div id="sub">hai</div>
<?php
}
?>
</div>
</html>
Script:
<script src="at/js/jquery.js"></script>
<script>
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
</script>
Style:
<style>
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
}
</style>
You can solve this using CSS clear:left; and float:left; property.
Check this demo jsFiddle
HTML
<div id="main">
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
<div id="sub">hai</div>
</div>
CSS
#sub{
border:solid 2px #000000;
height:30%;
width:20%;
clear:left;
float:left;
}
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
}
});
Also you can solve dynamically assign css property,
Check this demo jsFiddle
JQuery
$(document).ready(function(){
var n = $("#main").css("height","100%");
if (n) {
$("#sub").appendTo("#main");
$("#sub").css({
border: "solid 2px #000000",
height: "30%",
width: "20%",
clear: "left",
float: "left"
});
}
});
Use prependTo jQuery function instead of appendTo
Sorry if this question has been asked a lot. I am currently working on a site that will have a custom gallery. Of all things to get stuck on right now, its the gallery page indicator.
On this page, the left portion will be made of a gallery of "galleries", displaying 6 galleries per "page". http://www.ct-social.com/ctsdev/aff/news-and-events/
Above the gallery are small blue dots that will serve as gallery indicators. The code to create the gallery indicators is as follows:
<?php for ($i=0; $i < $n2; $i++): ?>
<div class="event-gallery-unselected"></div>
<?php endfor; ?>
Upon loading I would like the left most dot to be given a different style that is attributed to class="event-gallery-selected". Upon clicking any other dot (except the current selection) the currently selected dot needs to revert back to "event-gallery-unselected" and the clicked dot takes on "event-gallery-selected"
I am kinda new to PHP, very new to JavaScript and JQuery. If using either of those languages as an example could you please breakdown your explanation? Thank you very much for all of your help.
Updated code:
CSS
.event-gallery.selected {
position: relative;
top: -0.7em;
background: white;
background-color: #1e93bb;
width: 20px;
height: 20px;
margin: 7px;
border-radius: 50%;
}
.event-gallery {
position: relative;
top: -1.1em;
background: white;
background-color: #63c5e7;
width: 15px;
height: 15px;
border-radius: 50%;
margin: 7px;
float: right;
cursor: pointer;
}
Updated Code JS
<script type="text/javascript">
jQuery(document).ready(function($){
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
Just got it working now.
I would suggest having a class which is present on all of your gallery div elements. This will allow the common styles to be maintained and also allow you to have only 1 click handler. You can then have a separate selected class which you toggle as needed. Try this:
<?php for ($i = 0; $i < $n2; $i++): ?>
<div class="event-gallery"></div>
<?php endfor; ?>
.event-gallery {
color: #000; /* default styling ... */
padding: 5px;
}
.event-gallery.selected {
color: #FFF; /* selected item styling ... */
background-color: #C00;
}
$(".event-gallery").click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
Example fiddle
use jQuery like this:
$('divid').click(function(){
$('divid').css('background-image', 'pic2.jpeg');
});
for example
If you have a set of elements:
<div class="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
I typically handle it as such:
var $items = $('#wrapper .item');
$('.item').click(function(){
$items.removeClass('active'); // 'reset' the active links
$(this).addClass('active'); // apply the active class to the clicked item
})
This can easily be done with a little bit of help from jQuery.
$(function() {
$(".even-gallery-unselected").on("click", function() {
this.removeClass("event-gallery-unselected")
.addClass("event-gallery-selected");
});
});