I am loading divs with information from the database using php code:
for ($i=0; $i < $stmt->rowCount(); $i++){
$row = $stmt->fetch(PDO::FETCH_ASSOC);
$name = $row['uc_name'];
$image_url = $row['uc_image'];
$color = $row['uc_color'];
The creates a box for however many rows there are: http://jsfiddle.net/pKR5t/1/
I am trying to create a drop down menu for each item retrieved from the database. When the user hovers over class="header", the drop down menu should show but the list inside should be pertaining to that of the box hovered:
I believe I can use the .on() function to accomplish this but I am completely lost on how to use it. Any help on getting this accomplished would be helpful. Thanks
To use on and hover you will want to use the mouseenter and mouseleave events like so:
$("div.box div.header").on("mouseenter", function() { //mouseenter event
var currentBox = $(this).closest("div.box");
var currentTitleText = $(this).find("div.title").html();
//popup the list
}).on("mouseleave", function() { //mouseleave event
//close the list
});
For some additional info, check this post.
EDIT
Updated mouseover and mouseout to the slightly better mouseenter and mouseleave events.
You can do this without javascript using css.
If you insert your hover box inside your header div you can use css :hover to hide and show it on hover.
HTML
<div class="header">
<div class="title">PHP Row 1</div>
<div class="hoverBox">
<div class="hoverBoxTitle">Hover</div>
<div class="hoverBoxContent">Hover Content</div>
</div>
</div>
CSS
.hoverBox {
display: none;
position: absolute;
top: 0px;
left: 170px;
width:170px;
height:90px;
background:#333333;
z-index: 100;
}
.header:hover .hoverBox {
display: block;
}
Demo
Related
In jquery, I need to dynamically display first two values and after while click remaining values should be display?
<div class="category_items">
<div class="category_item">
<div class="test">test1_1</div>
<div class="test">test1_2</div>
<div class="test">test1_3</div>
<div class="test">test1_4</div>
<div class="test">test1_5</div>
<div class="test">test1_6</div>
</div>
<button>Show / Hide</button>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<script>
var elems = $('.category_item', '.category_items').filter(function() {
return $(this).children().length > 2;
}).hide();
$('button').on('click', function() {
elems.toggle();
});
</script>
I want to display first two items by default when i click the button i want show full list
Do this with css with
HTML
<style>
li div{display:none;}
li:hover div {display:block;position:absolute;left:200px;width:100px;height:100px;background-color:red;}
</style>
<ul>
<li>123<div>1</div></li>
<li>222<div>2</div></li>
<li>333<div>3</div></li>
</ul>
enter code here
:gt selector will be good for this situation. I hope, this code helps you.
<script>
$('.category_item .test:gt(1)').hide();
$('button').on('click', function() {
$('.category_item .test:gt(1)').toggle();
});
</script>
If you want to change the number of elements which you want to show, just change number in gt() selector.
See this also but I not sure if is normal to use span as child of ul not li but you can put in last li another ul and when show this new ul.
This all li is show when zou hover ul bu zou can do to show all li onli when hove some think one as example + hover last show li(user no need to click to see al!).
<style>
ul span{display:none;}
ul:hover span {display:block;/*position:absolute;left:200px;background-color:red;*/}
</style>
<ul>
<li>123<div>1</div></li>
<li>22<div>2</div></li>
<span>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
<li>223<div>3</div></li>
</span>
</ul>
How to use CSS or jQuery to style my background-color in DIV when the id inclue strings in php?
My code is:
<div id='result_'.$item_id.'>item</div>
You can attach a class to your div and use a jquery selector to get your div(by id or class) and change its css properties using .css(). Also I think you want to change the background after clicking on a specific div, so you need to attach also a click handler, extract its id and then change its background color.
<div class="my_class" id='result_'.$item_id.'>item</div>
$(".my_class").click(function(event){
var clicked_id_item = $(event.target).attr("id").split("_").pop();
$("#result_"+clicked_id_item).css('background-color','black')
})
If you can just add a class to your div, you can style it with css:
<div class="my-class" id='result_'.$item_id.'>item</div>
css:
.my-class {
background-color: red;
}
Or if you want to wrap your divs with a .wrapper, your css could be something like:
.wrapper > div {
background-color: red;
}
edit
I can see from your other comments that you are asking about the background-color changing when you click on the div. Although that was not made clear in your question, you could do that like this: (Building on my previous example)
.my-class.active {
background-color: blue;
}
Add some jquery:
$(".my-class").click(function(){
$(this).siblings(".active").removeClass("active"); // Maybe you could use .end() to keep the chain going
$(this).addClass("active");
});
You can use the attribute selector on the attribute id !
[id] matches every element with attribute "id".
[id=blah] is an equivalent to the selector #blah (every element with id="blah").
And [id^=blah] matches every element whose "id" attribute begins with blah.
[id^=result_] {
background: hotpink;
color: #fff;
}
div { margin: .2em; padding: .2em; }
<div id="result_blablah">#result_blablah</div>
<div id="result_hello">#result_hello</div>
<div id="nanana">#nanana</div>
<div class="plop">.plop</div>
I'm looking to setup a page which holds an image of grid paper. These grids can be selected and depending on what type of link the user chooses the color will be filled and saved. Once all of the blocks are filled this will be archived and then a new sheet will be displayed. I wanted to use PHP / MySQL on the backend but was wondering what would be good client side?
Why a image for the grid? Better solution is to use a table or a list filled with divs to create the grid. Then use jQuery to fill in the backgrounds when the user clicks a link.
Example for the grid:
<ul id="grid">
<li>
<div class="cell" id="cell_id"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</li>
<li>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</li>
...
</ul>
CSS example:
<style>
#grid {
list-style: none;
}
#grid li {
height: 50px;
}
#grid .cell {
float: left;
width: 100px;
height: 50px;
border: 1px solid black;
}
</style>
And finally use jQuery to fill the cells when a user clicks a link. You can find the cell by calculating the rows and cells or just give the cells a id. The saving part can be done by a AJAX call to a page that will save the information to the DB.
Simple jQuery example (you have to think up the rest yourself):
<script>
$('link').click(function() {
//place check for new sheet here
var id = $(this).attr('id');
//set the bg color
$('cell_id').css('background-color', 'red'); //or color code #FF0000
//save the info
$.post('save_info.php', { cell_id: id, color: "red" }, function(data) {
alert('saved!');
});
});
</script>
You can find more info and download jQuery at: http://jquery.com/
The jQuery code to create a new sheet when all the cells are filled can be done with a little check in the click function. This check must count all the cells that have a bg color, is this the same as the total cells? Then create a new sheet by removing all the cells their bg color and by setting new id's. But you can figure this out by yourself ;).
I'm trying to make a rating system from 0, so far I have two classes on and off, there are total of 5 stars,
It would show the rating of the item, until the person hovers over them, then it would hilight the previous stars and hide the current rating,
<div id="stars">
<div class="on"></div>
<div class="on"></div>
<div class="on"></div>
<div class="off"></div>
<div class="off"></div>
</div>
the JS I got so far
$('#stars').mouseover(function() {
$(this).children().prevAll().andSelf().attr('class', 'on');
$(this).nextAll().attr('class', 'on');
});
Which only hilights all the starts and messes up everything, anyone could help out? Working too many hours and just can't get it to work..
Thanks!
If you're using this as a preview before a click, then you may want to use the hover function like this:
$('#stars .star').hover(
function() {
$(this).prevAll().andSelf().addClass('on');
$(this).nextAll().removeClass('on');
},
function() {
$(this).parent().children().removeClass('on');
}
);
That goes with the HTML in this jsFiddle where you can see it work: http://jsfiddle.net/jfriend00/aRTzQ/
I'd also suggest using addClass() and removeClass() rather than manipulating the attribute directly as it gives you more flexibility to have other classes on the object and it's more readable.
To make a click sticky so it then remembers that setting, you could use something like this: http://jsfiddle.net/jfriend00/QxADg/. The corresponding CSS/HTML is in the fiddle.
$('#stars .star').hover(
function() {
$(this).prevAll().andSelf().addClass('preview');
$(this).nextAll().removeClass('preview');
},
function() {
$(this).parent().children().removeClass('preview');
}
);
$('#stars .star').click(function() {
$(this).parent().children().removeClass('on');
$(this).prevAll().andSelf().addClass('on');
});
$('#stars').hover(
function() {$(this).addClass("inPreview");},
function() {$(this).removeClass("inPreview");}
);
There's a lot of plugins out there, such as the one PPrice links to. I agree with others that that would be the better way to go unless they don't meet your needs for some reason.
If you want to make this code work or if you're just doing this for the learning, maybe this is what you're trying to do?
You can hover over the "stars" (boxes) to see the colour change.
http://jsfiddle.net/pW3Sn/
$('#stars > div').mouseover(function() {
$(this).prevAll().andSelf().attr('class', 'on');
$(this).nextAll().attr('class', 'off');
});
Actually you can implement it using pure CSS.
HTML code:
<div id="stars">
<div class="star">
<div class="star">
<div class="star">
<div class="star">
<div class="star"></div>
</div>
</div>
</div>
</div>
</div>
And CSS:
#stars {
height: 16px; /* height of stars block */
}
#stars .star {
height: 16px; /* height of one star */
padding-left: 16px; /* width of one star */
background-image: url('http://url.to.your.star.image');
float: left;
}
#stars .star:hover,
#stars .star :hover {
background-position: 0px -16px; /* toggle image */
}
A working example: http://jsfiddle.net/4CfzD/
Why not just use someone's plugin? e.g. http://www.fyneworks.com/jquery/star-rating/
I want to have an image with it's corresponding block of text rotating every few seconds on my website. Just like these guys http://hellofisher.com/
I know I can get a javascript to rotate the images but I haven't found where I can have the block of text alongside rotating to suit the images.
Just google for jquery content rotators or content sliders. There's a million ready-made plugins already done like this:
For example
I'll show you a simple example which you can easily use on your site. This example uses 3 slides and isn't a dynamic slider where you can have as many slides as you want to but it's easy to edit it into one if the amount of slides can vary.
HTML:
<div id="slider">
<div id="slider-area">
<div class="slide">content</div>
<div class="slide">content</div>
<div class="slide">content</div>
</div>
</div>
Slider is the visible area which the user can see, slider-area is the area where you put the slides and each slide contains a different image and text.
CSS:
#slider {
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
#slider-area {
width: 1200px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
.slide {
width: 400px;
float: left;
}
As you can see, slider-area's width is 3 times the size of slider because there are 3 slides. Slider has overflow: hidden which means scrollbar won't be visible and position: relative so that we can absolutely position the slider-area inside the slider. Then we simply insert slides inside the slider-area.
JS (using JQuery):
$(document).ready(function() {
var timer = setInterval(changeSlide, 5000);
});
function changeSlide() {
var pos = $('#slider').attr('scrollLeft');
if (pos==800)
pos=0
else
pos=pos+400;
$('#slider').animate({scrollLeft: pos}, 600, 'swing');
}
Here you set a timer which will call the changeSlide function every 5 seconds. The changeSlide function will take the current position of the slider's scrollbar and animate it accordingly. If it's displaying the last slide, next one will be the first slide (pos=0) and if it's not displaying the last slide, it adds 400 to the position so that it will scroll to the next slide. Basically the sliding animation is simply moving a hidden scrollbar with a timer.
Hopefully that helps!
Just use jQuery to rotate out a <div> containing an image and associated text. Use $.hide() and $.show() and Javascript's time functions.
You could try:
JAVASCRIPT
var imagelist = ["IMAGE1","IMAGE2","IMAGE3"]
var textlist = ["TEXT1","TEXT2","TEXT3"];
counter=0;
countmax=3;
var next = function(){
$('rotating_image').innerHTML="<img src=\"" imagelist[counter%countmax] + "\">";
$('rotating_text').innerHTML=textlist[counter%countmax];
countmax++;
}
var rotate = window.setInterval(next, SECONDS * 1000);
HTML
<span id="rotating_image"></span>
<span id="rotating_text"></span>