everyone. I have a problem using CSS and PHP.
Here is the code:
.book {
width:100px;
height:50px;
background-image: url(outside2.png);
position: absolute;
left: 557px;
top: 70px;
}
.book:hover > .right {
visibility:visible;
opacity:1;
transition-delay:0s;
<?php $pos = 1 ?>
}
.right {
width: 300px;
height: 200px;
background-image: url(r2.png);
position: absolute;
left: 100px;
top: -50px;
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.2s,opacity 0.2s linear;
}
I want the variable $pos's value change to 1 when users move their mouse on the div.
But $pos always be 1 no matter where my mouse is.
Do I use the wrong way to design this website?
I think you have two options. One is to change the value with javascript and then submit it with AJAX. The other one is to change the value with javascript in a hidden field and then submit it with the form.
Related
I'm preparing a custom mailing, through php, and I need to prepare four custom circles, filled on depending on some percentages ( which I receive them dinamically ), so I need some html tags for do it:
Firstly, I thought in canvas tag, but I read that a lot of email clients don't support canvas tag: https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
So, I thought in svg tag, but now I realize that, for do the calculation of the percentage, I need javascript to do it, and mail clients don't support javascript either.
So, I understand that I can't do it to mailing templates, right?
Thanks you very much!
Following code snnippet may work for you
CSS
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: lightblue;
}
.arc {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(45deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
HTML
<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
<div class='arc'></div>
</div>
im doing this project for university. i'm currently facing a minor problem but yet disturbing.
link to site: http://haw.finekost.com/ws2013/PP_HATE_SITE/
CSS:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
padding-bottom: 20%;
position: relative;
webkit-filter: grayscale(1);
width: 20%;
}
.box:hover {
cursor: pointer;
moz-filter: all .5s ease-in-out;
opacity: 1;
webkit-filter: grayscale(0);
webkit-transition: all .5s ease-in-out;
}
img {
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
the boxes are generated via php.
the image boxes change in size (just 1px) when i hover them. i really dont know why they do it. Hopefully someone can help me
it appears to be related to the webkit transition filter in your .box:hover
Maybe this will help?
Prevent flicker on webkit-transition of webkit-transform
actually if you add -webkit-backface-visibility: hidden; to the box:hover css it appears this will fix the problem.
It is happening due to your webkit-transition style rule setup on your box:hover selector.
If you take it out, then there is no 'flicker'. THe reason it does not happen in Firefox is because you do not have a firefox vendor property set there such as -moz-transition.
Why do you need a transition in this case ?
In your website you use for .box a width of 20%. It looks like this causes somehow a 1px gap. However this could be solved by using width: 20vw for .box.
vw is viewport width in % this removed the 1px border.
So use:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
position: relative;
webkit-filter: grayscale(1);
padding-bottom: 20vw;
width: 20vw;
}
I am trying to get a jQuery function to slide li items left and right by clicking an arrow. I am using a jQuery script called TinyCarousel.js. While I have it functioning properly, it continues to scroll right until the last li item is in the first position. What I have currently can be seen here in the "Games Currently Testing or Releasing section" under the main slider. If you scroll all the way to the right you will notice the issue.
Is it possible to either...
1) Change the jQuery to make the last li item stop once it is showing all the way on the right side of the window? I know this would have to be relative to the browser window size as well as make one single partial movement incase the window size has a partial item showing. I also know I would have to know the amount of li items which I can do within the php.
2) Or two, append the li continually so that the slider never seems to end. Just continues through repeating over and over? I would guess that I need to continually append li items as well as remove them if they are off screen.
I attempted to create a jFiddle to show the issue. But it is doing something all together different on jFiddle which is closer to what I need. It seems to stop moving right at some point. But it does not need the entire last li to display completely. What is it doing differently than what I have on the live site where it does stop?
Any help is greatly appreciated. I did search and found this but it did not seem to work in this situation. Thank you in adavnce.
I have am using jQuery 1.10.2, php 5.4, TinyCarousel.js version 1.9
Here is what I have currently.
The CSS
.PrevArrow {
width: 5%;
float: left;
margin-top: 20px;
}
.NextArrow {
width: 5%;
float: right;
margin-top: 20px;
}
.ListImage img {
margin-top: 5px;
margin-bottom: 10px;
}
#slider-code .viewport {
float: left;
width:90%;
height: 95px;
overflow: hidden;
position: relative;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
}
#slider-code .buttons {
display: block;
margin: 0px 10px 0 10px;
float: left;
}
#TickHead {
margin-top: 3px;
}
#slider-code .prev {
margin: 0 10px 0 10px;
}
#slider-code .next {
margin: 0 10px 0 10px;
}
#slider-code .disable {
visibility: hidden;
}
#slider-code .overview {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
top: 0;
}
.TestingTickerText {
vertical-align: top;
color: #666666;
font-family:'Open Sans', "lucida grande", tahoma, verdana, arial, sans-serif;
font-size: 10px;
}
#slider-code .overview li {
float: left;
margin: 0 20px 0 0;
padding: 1px;
height: 65px;
width: 105px;
left: 0;
}
#slider-code .pager {
overflow:hidden;
list-style: none;
clear: both;
margin: 0 0 0 45px;
}
#slider-code .pager li {
float: left;
}
#slider-code .pagenum {
text-decoration: none;
text-align: center;
padding: 5px;
color: #555555;
font-size: 14px;
font-weight: bold;
display: block;
}
#slider-code .active {
color: #fff;
}
The php
<div id="slider-code">
<div class="PrevArrow">
<img src="Link to Left Arrow"/>
</div>
<div class="viewport">
<ul class="overview">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
etc...
</ul>
</div>
<div class="NextArrow">
<img src="Link to Right Arrow"/>
</div>';
<center>
<span id="TickHead" class="cat_bg2">Games Currently Testing or Releasing</span>
</center>
</div>
The jQuery
(function ($) {
$(document).ready(function(){
$('#slider-code').tinycarousel({ display: 1});
});
}(jQuery));
I think the problem you're having is due to css positioning of the images. Try adjusting the margins so that they will be placed slightly further away from each other; so that when no image is appended the slider will stop and there will be no space. If thats not the issue, try this:
1:
Create a div and place all of the slider images in it.
2:
Give each arrow button a separate div and class.
3:
Use the jquery append function to dynamically add images to the slider class when a user clicks either button.
$(document).ready(function(){
$('.arrowbutton').click(function(){
$('.imageslider').append('.image');
});
});
Also, remember to give your image slider a set width in css, and set overflow to hidden. That should make sure no appended images go outside of the slider, and no scrollbars appear.
Okay so I have tried to implement Google Maps as a background to my website. But when I try to put text over it using this code:
.content{
z-index:0;
background-color:fffff;
position: absolute; top: 0; left: 0;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
And that is giving me an error with the map it is displaying it on top of the map, which is what I want but it is not working with with margins for some reason. All my code is here: http://pastebin.com/uz6wwtYZ
Can anyone help me because I want the content in the center of the webpage and the map to act as the background.
Thanks.
Try adjusting the top and left instead of margin when an item is set to an absolute position:
.content{
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 100px;
width: 900;
height: auto;
margin-right: auto;
margin-left: auto;
}
Hope that helps? Also might want to set a higher z-index value as I have done above.
If you want it horizontally centered with auto margin values but also absolutely positioned, I don't think you can do that.
You can try this instead by giving your content an absolute width and offsetting the left property:
.content{
width: 500px;
z-index: 100;
background-color:fffff;
position: absolute; top: 100px; left: 50%;
height: auto;
margin: auto;
margin-left: -250px; /* half the value of the width */
}
Here's a link to a JS Fiddle that uses your code: http://jsfiddle.net/4FLKt/1/ Seems to be working fine.
Mikey.
Did you try putting the content on top of the map?
#map {
z-index:1;
}
.content{
z-index:100;
}
This is because your using position: absolute; and that is not working togetter with margin:auto;.
Place a div around it with a full width over the google maps and make that absolute... then in that div you can center a other div.
Example
<div> //This div has position:absolute; and the width of the Google maps chart.
<div> //This div has margin:0 auto;
Content here
</div>
</div>
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic