In a website i have a PHP snippet that on every refresh, certain elements change colour (div's links, text, hover states ect). This works fine but at the moment, on refresh they change to my themes colour by applying them to the the to css where necessary (examples below).
I now have a jQuery function for hover states which animates and all my link:hover states they are included in the colour shuffle. When the colour shuffle is applied though it's the default 'red','blue','green' if you were to put them in the css.
I have had a look online but i am unsure of where else to look as it is working just not on the jQuery snippet so i assume it's something to do with the jQuery function.
PHP at top of header:
<?php $colours = array('red', 'yellow', 'pink', 'blue', 'green');
shuffle($colours);
$random = $colours[0]; ?>
On the body tag it's echoed as an id:
<body id="<?php echo $random; ?>">
Link *<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>*
And on any div's or elements i want them to change colour before them in the css is #green,#red ect and the colour so if i wanted the 'share class' to change my css is like this:
#green .share {
color:#79b74c;
}
#red .share {
color:#900;
}
Now this all works apart from my hover shuffle states with the jQuery function:
$(document).ready(function(){
// colour rollover navigation
$(".share").hover(function() {
$(this).stop().animate({ 'color': "<?php echo $random; ?>" }, 300);
},function() {
$(this).stop().animate({ 'color': "#fff" }, 300);
});
It must be something to do with the jQuery as it works well when it's removed, and does work when applied but it's taking the colours from the php as css's default colour hex codes.
Thanks.
What about CSS3?
#green .share {
color:#79b74c;
}
#green .share:hover{
color:#79b74c;
}
#red .share {
color:#900;
}
#red .share:hover {
color:black;
}
.share:hover{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
i have created a arraylist in php
It is place in a button . When i click on it opens the button, it opens all the aaraylist but there is some problem with the code the link to,the code is here.can someone tell me where is the problem.
var Arraylist<String> = new Arraylist<String>;
The problem is that any click will immediately hide the dropdown, after which you make it visible again by toggling it.
I'm trying to edit you fiddle to try and get it to work the way you want :).
Edit: here is a fiddle that does what I think you want it to do: fiddle
The idea I got from your fiddle is that you want to toggle the menu when you click it, and if you click anywhere else, the menu is hidden by default.
This works by remembering if the item was toggled or not, if not, it'll hide by default.
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var dd = $("ul.dropdown");
var toggled = false;
var target = $(e.target); //2
if (target.parent().is('#nav')) {
var li = target.closest('li.menu');
toggled = true;
li.find('ul.dropdown').toggle();
}
if (!toggled) {
dd.hide();
}
});
OK, let's tackle all the problems with your code.
I'll explain what you're doing wrong and why, and what is recommended.
First up:
HTML Markup.
Your included example code contains markup errors. You're closing one of your list items inside the nested unordered list after the nested unordered list. Minor, but yet important for valid markup. Some browsers can go nuts over these things.
The second thing I noticed was that you're using the same ID for the lists. An ID is unique to the document in order to quickly reference it in CSS and Javascript. If you intend to select more than one element in the document, use classes, that's what they're there for. You can read more about it here or here.
Depending on what intended use you have for it; to achieve the same desired result, consider using this markup instead
<div class='emp_alt'>
<div class='container'>
<div class='title'>EMP</div>
<img src="http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico">
</div>
<div class='dropdown'>Contact no.</div>
</div>
Generally speaking, it requires less processing time for the client the less elements you have. When you apply CSS to the elements it is highly recommended to select them by class or ID, not by tag name. Using tag names can take up extra processing time because the client has to do more generalized searches. You can read more about efficient CSS here.
Here's a working example with your corrected markup.
Here's a working example using the alternate markup.
I'm not sure if you're trying to accomplish a sort of tooltip behavior, in which case, this example should suit you.
The JQuery (Javascript)
The other answers rightly pointed out your main problem was that you were hiding the dropdown on click. What they didn't address was that when the user clicks on something, and your document click picks up on it, it's going to return the element that is in the front.
So, when you click on the text, the #nav element is in the front. The image however, is an element in its own, and is in front of the #nav element.
This is why you should use the proper events instead because they include everything inside the element.
As you may have noticed in my examples above, there is a faster, cleaner and better way of achieving what you want.
You should be doing something like this instead
var dropdowns = $(".dropdown");
$(".nav > li").click(function(e){
//Prevent document click event from firing
e.stopPropagation();
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
});
//Hide all dropdowns if not clicked on a list item (or container)
$(document).click(function(){
dropdowns.hide();
});
Note: if you don't want to stop propagation you can use a "sensor" instead. Basically, a sensor determines a boolean's state which is then used to determine if the document click event should do anything or not. An if statement checking the boolean's state at document click should suffice.
var dropdowns = $(".dropdown");
var sensor_state = true;
$(".nav > li").click(function(e){
var this_dropdown = $(this).children("ul.dropdown");
dropdowns.not(this_dropdown).hide();
this_dropdown.toggle();
}).mouseenter(function(){
sensor_state = false;
}).mouseleave(function(){
sensor_state = true;
});
$(document).click(function(){
if(sensor_state){
dropdowns.hide();
}
});
This relies on the markup where the nav element has a dropdown child.
Here's an example using your example.
The problem here is that your markup makes this code toggle the dropdown when it itself is clicked. That's why I added a container to the earlier examples.
Hopefully, I've made at least some sense and cleared up your problem.
Update
After your latest comments, indicating you're using jqgrid and you want a dropdown inside, I decided to create a rather thorough example of how it can be done.
I suggest you study the code and learn from it. You don't have to do exactly as I did, as long as you know how and why.
Functionality:
When a user clicks a contact cell in the jqgrid it will show the dropdown container and the data provided from the "server" (custom array data is easier than staging an ajax event). The data provided by the server is in a hidden column (following the contact column)
If you click inside the dropdown container, it will not close. I added a close button inside it because users might otherwise get confused as to how to close it. It's better to have one than not to have one
If you click anywhere else in the document, it will close
If the user clicks the same cell while the dropdown container is visible, it will close
The dropdown container is not attached to the cell itself, but is instead positioned from the outside. This allows us to reuse the same container, instead of creating new containers for every single cell, saving us time in the process.
This is as far as writing your code I'm willing to go. The rest is up to you mate :)
I am reluctant to add more text to this post, but for completeness sake, I will add the entirety of the example code.
Code | JSFiddle Example
HTML
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/redmond/jquery-ui-custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://trirand.com/blog/jqgrid/themes/ui.multiselect.css" />
<script src="http://trirand.com/blog/jqgrid/js/jquery.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery-ui-custom.min.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.layout.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/ui.multiselect.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.tablednd.js" type="text/javascript"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.contextmenu.js" type="text/javascript"></script>
<table id="list"></table>
<div id="pager"></div>
<div id="contact_info"></div>
CSS
#contact_info{
position: absolute;
top: 0;
left: 0;
display:none;
background-color: white;
border: 1px solid gray;
padding: 5px 3px;
-moz-box-shadow: 3px 3px 4px #CCC;
-webkit-box-shadow: 3px 3px 4px #CCC;
box-shadow: 3px 3px 4px #CCC;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#CCCCCC')";
}
#list .contact{
cursor: pointer;
}
.container{
cursor: pointer;
}
td.contact:active{
background-color: #FBEC88;
}
.container .dropdown{
display: none;
}
.ui-jqgrid tr.jqgrow td{
white-space: normal;
}
/*
Style the dropdown box
*/
h2{
border-bottom: 1px solid lightgray;
}
p{
padding: 2px;
}
h2, p{
margin: 0;
}
.close_btn{
font-size: 10px;
line-height: 10px;
float: right;
text-decoration: none;
}
Javascript
//Preload the image to avoid flashes
search_img= new Image();
search_img.src = "http://www.iconarchive.com/download/i32215/tpdkdesign.net/refresh-cl/Symbols-Find.ico";
//The dropdown container
var contact_info = $("#contact_info");
//ID of last clicked row
var last_row;
//Sensor state determining whether document click will close the dropdown container on click
var sensor_state = true;
//Dropdown information data (base)
var dd_bp = "<img src='"+search_img.src+"'>",
dd_inf = "<h2>Contact information</h2><p>Phone: 555-12345<br/>E-mail: something#someplace.whatever<br/>P/O Box: 555555</p>"
//Data array (don't know what you use as a source, but I'll keep it simple)
//This setup allows you to send dropdown data from the server as well :)
var data_from_server = [
{id:"1",title:"Economy advisor",name:"Luke",lname:"North", contact: dd_bp, dropdown: dd_inf},
{id:"2",title:"Salesperson",name:"John",lname:"Smith",contact: dd_bp, dropdown: dd_inf},
{id:"3",title:"Economy advisor",name:"Jimmy",lname:"Hendrix",contact: dd_bp, dropdown: dd_inf},
{id:"6",title:"IT Manager",name:"Caroline",lname:"GlaDos",contact: dd_bp, dropdown: dd_inf},
{id:"5",title:"Quality Inspector",name:"Paul",lname:"Shoreman",contact: dd_bp, dropdown: dd_inf},
{id:"4",title:"Quality Inspector",name:"Liza",lname:"Ingridge",contact: dd_bp, dropdown: dd_inf},
{id:"8",title:"Distribution manager",name:"Elisabeth",lname:"Welman",contact: dd_bp, dropdown: dd_inf},
{id:"10",title:"Quality Inspector",name:"John",lname:"Johansson",contact: dd_bp, dropdown: dd_inf},
{id:"11",title:"Economy advisor",name:"Tommy",lname:"the Knuckle",contact: dd_bp, dropdown: dd_inf},
{id:"9",title:"Manufacturer",name:"Rosa",lname:"Minx",contact: dd_bp, dropdown: dd_inf}
];
//Adds the content to and repositions the dropdown container to the current row cell
function show_contact_info(rowid){
var row = $("#"+rowid),
contact_cell = $("td.contact", row),
dropdown_content = $("td.dropdown", row).html();
//Add the content
contact_info.html(dropdown_content).append("<a class='close_btn' href='#'>close</a>");
//Add a close button event
$(".close_btn").on("click", function(e){
e.preventDefault();
contact_info.hide();
});
//Position the contact info box
contact_info.css({
//The last calculations will center the container
left: contact_cell.offset().left - contact_info.outerWidth()/2 + contact_cell.outerWidth()/2,
//The last calculation will position the container below the cell, replace it with
// -contact_info.outerHeight() to position it above the cell
top: contact_cell.offset().top + contact_cell.outerHeight(),
});
contact_info.show();
}
function sensor_enter(){sensor_state = false;}
function sensor_leave(){sensor_state = true;}
function add_sensor(element){
element
.on("mouseenter", sensor_enter)
.on("mouseleave", sensor_leave);
}
//Setup jqgrid
$("#list").jqGrid({
datatype: "local",
width: 600,
colNames:['EID', 'Title','First name', 'Last name', 'Contact', "Dropdown"],
colModel:[
{name:'id',index:'id', width:20, sorttype:"int"},
{name:'title',index:'title', width:90},
{name:'name',index:'name', width:50, align:"left"},
{name:'lname',index:'lname', width:50, align:"left"},
{name:'contact',index:'contact', width:25, align:"center", classes:'contact'},
{name:'dropdown', index:'dropdown', hidden:true, classes:'dropdown'}
],
rowNum:10,
rowList:[5,10,15],
pager: '#pager',
viewrecords: true,
caption:"Employees",
onSelectRow: function(rowid, status, e){
var row = $("#"+rowid)
//"Hide" selection so that cell selection looks "cooler" :)
row.attr("class", "ui-widget-content jqgrow ui-row-ltr ui-state-hover");
},
onCellSelect: function(rowid, iCol, cellcontent, e){
if(iCol == 4){
if(last_row == rowid){
if(contact_info.is(":hidden")){
show_contact_info(rowid);
}else{
contact_info.hide();
}
}else{
show_contact_info(rowid);
}
last_row = rowid;
}
},
idPrefix: "emp_",
gridComplete: function(){
//Because the content is dynamic, we need to add it after the grid has finished
//This should be done for server generated content, ie the loadComplete event for server requests
add_sensor($("tr td.contact"));
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
for(var i=0;i<=data_from_server.length;i++){
$("#list").jqGrid('addRowData',i+1,data_from_server[i]);
}
//Sensor for the dropdown container
add_sensor($("#contact_info"));
//Hide contact info on document click
$(document).click(function(){
if(sensor_state){
contact_info.hide();
}
});
Here is what it should look like
Here are all the references
Why must the ID attribute be unique on each page?
Using Classname (class) and ID in HTML
Writing efficient CSS
The difference between "return false;" and "e.preventDefault();"
return false vs e.stopPropagation();
.click
.children
.not
.on()
.offset()
.outerWidth()
.outerHeight()
jqGrid
jqGrid events
You just need to get rid of the additional hide() as you are hiding then toggling, overriding your toggle.
See this for instance with it working
http://jsfiddle.net/RxJer/11/
var nav = $('#nav');
nav.find('ul#nav').toggle();
var emp = $(this);
$("html").click(function() {});
$(document).bind('click', function(e) {
var target = $(e.target); //2
var dropdown = target.parents('#nav').find('li.menu ul.dropdown');
dropdown.toggle();
});
Try this:
$(document).bind('click', function(e) {
var target = $(e.target); //2
if (target.parent().is('#nav') || target.parent().is('.menu')) {
var li = target.closest('li.menu');
var dd = li.find('ul.dropdown');
var isVis = dd.is(':visible');
$("ul.dropdown").hide();
(isVis) ? dd.hide() : dd.show();
} else {
$("ul.dropdown").hide();
}
});
I´m trying to change the row color depending on a value, for a server side loaded datatable, but it's not working. I'm using a code like this one on my javascript:
$('#table').dataTable({
'bServerSide': true,
'bProcessing': true,
'sAjaxSource': 'datatables/my_ajax.php',
'iDisplayLength': 50,
"sPaginationType": "bootstrap",
"fnInitComplete": function(oSettings) {
for (var i = 0, iLen = oSettings.aoData.length; i < iLen; i++) {
if (jQuery.inArray(oSettings.aoData[i]._aData[2], food_types) != -1) {
oSettings.aoData[i].nTr.className = "myClass";
}
}
},
myClass looks like:
.myClass{
background-color: red;
}
.myClass td {
background-color: red;
}
So, basically when the second <td> of each row has a value that appears on the food types array, the class should be changed to myClass. This part is working (I can see with firebug that the class has changed), however I cannot see the change (I don't see the row turning to red background). What am I missing? Also, is this a good approach or a cleaner way would be to change the color from ajax directly? If so, how?
Looks like your dataTable's CSS wrapper is overwriting your style .. Maybe that the reason you do not see the change in the backgroundcolor..
Looks like you need to change the class on which it is being applied..
Maybe more in these terms
table.display.myClass
{
background-color: red !important
}
table.display.myClass td
{
background-color: red !important
}
More like guessing the wrapper as i have no idea about the exact classes being applied by the datatables plugin..
I am trying to get the following:
By using Flexslider (http://www.woothemes.com/flexslider/) I want to get a different background color according to which slide is loaded.
I did something like this:
<?php
$bg1="red";
$bg2="blue";
?>
Then, in my flexslider jquery:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider) {
var current = slider.currentSlide;
$('#container').css("background-color","<?php echo $bg?>+current");
},
});
});
</script>
I am trying to retrieve the value from my php variables, and put them inside the css for my container. Ok here is where I'm stuck, how do I get it to load bg1 if it's the first slide, bg2 if it's the second, and so on?
I thought I could do something like +current but it's not working... I'm sure it's something easy here-
Any help is super appreciated!
Thx!
I managed to do what I needed by using Flexslider (which has some APIs), so my final code is like:
<script type="text/javascript">
$(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshow: true, //Boolean: Animate slider automatically
slideshowSpeed: 6000,
animationSpeed: 300,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider) {
animate = 'bg'+slider.animatingTo
$('#container').addClass(animate, 1000);
current = 'bg'+slider.currentSlide;
$('#container').removeClass(current);
}
});
});
</script>
This is untested, however taking a quick look throw flexslider.js I'm relatively confident you can achieve your background scrolling inside the function slider.flexAnimate found at line 427. This assumes you only have the slider in use at one location (or at least are OK with the background change happening for each instance of the slider).
Also, if your slider is on a constant time interval I'd like to suggest using CSS keyframe animations to loop through your 2 background options. Here's a little example, assuming a 10 second interval:
#keyframes bgpulse {
0% {background-color: #FFFFFF;}
100% {background-color: #000000;}
}
#-webkit-keyframes bgpulse {
0% {background-color: #FFFFFF;}
100% {background-color: #000000;}
}
/*Body Styles*/
body {
animation: bgpulse 10s infinite alternate;
-webkit-animation: bgpulse 10s infinite alternate;
}
Use modulus, as in..
$('#container').css("background-color",(current%2==0)?"<?php echo $bg1?>":"<?php echo $bg2?>");
Looking to tweak this script: http://css-tricks.com/examples/InfoGrid/
I've added an image within each "dt", I'd like it to be a specific size when closed & then animate larger when that "dt" is selected (much like how the text is). Of course then return to it's original size when a different "dt" is selected.
Also would like more control over things that are in their "normal state" vs. "selected state". Any ideas?
<div id="page-wrap">
<div class="info-col">
<h2>Superman</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image</a>
<dl>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text</dt>
<dd>Stuff Here1</dd>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 2</dt>
<dd>Stuff Here2</dd>
</div>
<div class="info-col">
<h2>Superman 2</h2>
<a class="image superman" href="http://jprart.deviantart.com/art/Batman-and-Superman-64545242">View Image 2</a>
<dl>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 3</dt>
<dd>Stuff Here3</dd>
<dt><img src="http://s3.buysellads.com/1252508/65529-1308680363.jpg"> Other text 4</dt>
<dd>Stuff Here4</dd>
</div>
</div>
The JS:
$(function() {
// Set up variables
var $el, $parentWrap, $otherWrap, $imgBig,
$allTitles = $("dt").css({
padding: 5, // setting the padding here prevents a weird situation, where it would start animating at 0 padding instead of 5
"cursor": "pointer" // make it seem clickable
}),
$allCells = $("dd").css({
position: "relative",
top: -1,
left: 0,
display: "none" // info cells are just kicked off the page with CSS (for accessibility)
});
// clicking image of inactive column just opens column, doesn't go to link
$("#page-wrap").delegate("a.image","click", function(e) {
if ( !$(this).parent().hasClass("curCol") ) {
e.preventDefault();
$(this).next().find('dt:first').click();
}
});
// clicking on titles does stuff
$("#page-wrap").delegate("dt", "click", function() {
// cache this, as always, is good form
$el = $(this);
// if this is already the active cell, don't do anything
if (!$el.hasClass("current")) {
$parentWrap = $el.parent().parent();
$otherWraps = $(".info-col").not($parentWrap);
// remove current cell from selection of all cells
$allTitles = $("dt").not(this);
// close all info cells
$allCells.slideUp();
// return all titles (except current one) to normal size
$allTitles.animate({
fontSize: "14px",
paddingTop: 5,
paddingRight: 5,
paddingBottom: 5,
paddingLeft: 5
});
// animate current title to larger size
$el.animate({
"font-size": "18px",
paddingTop: 10,
paddingRight: 15,
paddingBottom: 0,
paddingLeft: 10
}).next().slideDown();
// make the current column the large size
$parentWrap.animate({
width: 351
}).addClass("curCol");
// make other columns the small size
$otherWraps.animate({
width: 140
}).removeClass("curCol");
// make sure the correct column is current
$allTitles.removeClass("current");
$el.addClass("current");
}
});
$("#starter").trigger("click");
});
The answer that worked for me is:
$el.find('img').animate({ //enlarge image(s)
width: 225
}).parent().next().slideDown();
$allTitles.find('img').animate({ //reduce image(s)
width: 125
}).parent().next().slideDown();