ineed your help in php &jquery
im working in news site in news blok the image should be chang when a mouse move to defrent news title
this is the templat
<section class="box-nwes-con">
<a href="#">
<img src="images/sport-img.jpg" title="{title}" alt="{title}" />
</a>
<div class="news-box-con">
<div class="title-news-block">{title}</div>
<!-- START BLOCK : text_row -->
<div class="center-news">
<a href="#">
<p>{title}
</p>
</a>
<div class="cler"></div>
</div>
<!-- END BLOCK : text_row -->
</div><!--End news-box-con-->
<div class="cler"></div>
</section>
I new in jquery but i think it's not hard work!!
how i can chang image when hover newstitle
hellllllllllllp pleas
assuming your news title is the in center-news div - please try add this to header.
<script type="text/javascript">
$(document).ready(function() {
$('.center-news p').hover(
function() {
//on mouse enter
$('.box-nwes-con img').prop('src', 'image2.png');
}, function() {
//on mouse out? remove if not needed..
$('.box-nwes-con img').prop('src', 'none.png');
});
});
</script>
Please let me know if you have any difficulty by adding comment and i'll try help more..
UPDATE:
Please see this fiddle:
http://jsfiddle.net/rzQ8f/
Related
I have created an array with 8 items.
Now on page 1 I have for each array-item a html link. Each array-item has a different color. When clicked on one of the 8 html links it will redirect to page 2. There I want that a div-background gets the color linked to an array item.
My php-code generates for each array item a classname: .feeling1, .feeling2, .feeling3, .feeling4, .feeling5, ...
Now this seemed easy by simply saying when clicked on an element with class name (for example) .feeling1 then change the background-color of the div (id="resultaat") on page 2. But apparently this code won't work...
Anyone a solution for this? Thanks in Advance.
Example of one array item:
[
"mood" => "social",
"number"=>"feeling4",
"name"=>"DOK FLEA MARKET",
"picture" => "images/treasures/social.png",
"about" => "Every Sunday till the end of September there's a flea market full with people selling their odds and ends, homemade stuff and art ",
"street"=>"Koopvaardijlaan 4",
"city"=>"GHENT",
"days"=>"opening days: Sunday",
"hours"=>"opening hours: 10:00AM-6:00PM "
],
Page 1:
<body>
<!--CONTAINER-->
<div id="container">
<!--HEADER-->
<header>
<h1 id="headertitel">PICK YOUR MOOD</h1>
</header>
<!--SECTION-->
<section id="middenstuk">
<ul class="list">
<?php foreach ($arr_artist as $key=> $artist) { echo "
<li class='".$artist[' number ']."'><a href='3.php?id=".$key."' class='feeling".$artist[' mood '].", trala'>".$artist['mood']."</a>
</li>"; } ?>
</ul>
<script>
$(".feeling").mousedown(function () {
$(this).addClass('slideright');
});
</script>
</section>
<!-- FOOTER -->
<footer>
<a class="linkhome1" href="4.php">
<div class="locatie"></div>
</a>
<a class="linkhome1" href="index.php">
<div class="home"></div>
</a>
</footer>
</div>
The Jquery code:
$(".feeling2").click(function () {
$("#resultaat").css("background-color", "red");
});
If interpret question correctly , two html exist. At "page1" click on <a> element should render specific element #resultaat background red at "page2" ?
Try
at "page1"
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<ul>
<li><a class="feeling2" href="page2.html">feeling 2</a>
</ul>
<script>
$(".feeling2").click(function (e) {
// pass settings to `page2` by appending `"?id=resultaat&background=red"`
// to `.feeling2` `.href`
e.target.href = e.target.href + "?id=resultaat&background=red";
});
</script>
</body>
</html>
at "page2"
<!DOCTYPE html>
<html>
<script src="jquery-1.11.3.js">
</script>
</head>
<body>
<div id="resultaat">
<img src="images/moods/lazy180.png" alt="Logo" />
<img src="" class="moodpics" alt="artist name" />
<!--<p>description</p>-->
<p class="about">about</p>
<p class="street">street</p>
<p class="city">city</p>
<p class="days">days</p>
<p class="hours">hours</p>
<a class = "vernieuwen" href="3.php?id=1" ><div class=""></div></a>
</div>
<script>
$(document).ready(function() {
// parse `location.search` `?id=resultaat&background=red` ,
// set at `click` of `.feeling2` at `page1`
var mood = location.search.slice(1).split(/=|&/);
// select element having `id` `resultaat` ,
// set `$("[id=resultaat]")` `css` `background`:`red`
$("["+mood[0]+"="+mood[1]+"]").css(mood[2], mood[3]);
})
</script>
</body>
</html>
I have found the solution for my "problem" simply by adding this code on page 2:
<div class="<?php echo $arr_artist[$artist_id]['number']?>" id="resultaat">
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
I'm trying to slide one div closed, and another open at the same time using a button. here is my div code:
<div class='toggle_parent'>
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='toggled_content' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
And then the jQuery is as follows:
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none')
$('.toggled_conent').slideDown().css('display', '')
});
});
I've tried so much that my brain doesn't function anymore and I know the answer will be "so easy I should have figured it out", but I'm stuck. I want the toggled content to appear and the toggleHolder to go away when you press the toggler.
Thanks in advance!
Hide your hidden content via javascript instead of the style, and get rid of the .css calls:
$(document).ready(function(){
$('.toggled_content').hide();
$('.toggler').click(function() {
$('.toggleHolder').slideUp();
$('.toggled_content').slideDown();
});
});
Also you had a typo in your .toggled_content selector.
Here's a working JSFiddle.
Have you tried this?
$('.toggler').click(function() {
$('.toggleHolder').slideUp().hide();
$('.toggled_conent').slideDown().show();
});
Please change class name = "toggled_content" to something else in div and jquery so this looks like
jQuery
<script type="text/javascript">
$(document).ready(function(){
$('.toggler').click(function() {
$('.toggleHolder').slideUp().css('display', 'none');
$('.haveOther').slideDown();
});
});
</script>
HTML
<div class='toggle_parent' style="background-color:#999;">
<div class='toggleHolder'>
<p>Content here</p>
<span class='toggler'><button class="toggler" type="submit">Send Error Report</button></span>
</div>
<div class='haveOther' style='display:none;'>
<p>Hidden Content</p>
</div>
</div>
This will work for you.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.