Basically, I would like to accomplish the following with jQuery:
<div class="120 most-voted">
<!-- DON'T HIDE THIS DIV -->
</div>
<div class="110 voted">
<!-- some stuff here -->
</div>
<div class="120 voted">
<!-- hide this div with class '120' since there's already
another div with class '120' at the top -->
</div>
<div class="23 voted">
<!-- some stuff here -->
</div>
EDIT: The numbers are dynamically generated by a PHP function:
<?php $postid = get_the_ID(); // capture the id ?>
<div id="<?php echo $postid; ?>" class="most-voted">
I don't want to hide the div at the top.
Any suggestions (I don't mind wrapping another div in the div at the top to accomplish this result)?
This will make the first div with class "v120" visible and all others hidden:
var theClass = "v120";
$("div." + theClass).first().show().end().not(":first").hide();
Live example
(I added the "v" to "120" because I wasn't sure whether "120" is a valid CSS class.)
How that works:
Find all divs with the class - $().
Reduce that set temporarily to the first match - .first()
show that one (in case it used to be hidden)
End the temporary reduction of the set - .end()
Reduce the set to only the matches that aren't the first - .not(":first")
hide them
Its not valid html, the id must be unique within the document
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Use rel attributes instead of IDs. Then use selector like:
$('div.voted[rel=110]')
If you want to use same div, you should conceder using a class attribute since double id is not allowed.
<div class="most-voted id_120">
<!-- some stuff here -->
</div>
<div class="voted id_110">
<!-- some stuff here -->
</div>
<div class="voted id_120">
<!-- hide this div with id 120 since its already
at the top in the div with class most-voted -->
</div>
<div class="voted id_100">
<!-- some stuff here -->
</div>
use this to locate the first on http://api.jquery.com/first-selector/
Related
Just a simple question to ask if there is someone available to assist me. Please take a look at this section on my index page:
<?php foreach($galleries as $item) { ?>
<div class="col-md-2">
<p>Eagle Fruit <?= $item['gallery_name'] ?></p>
<img src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" class="img-responsive">
View the Gallery
</div>
<?php } ?>
My Controller is setup with the following function
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Site extends MX_Controller {
public function __construct()
{
parent::__construct();
$this->load->model('gallery/Gallery_m');
}
public function index($id = 'ID')
{
$data['title'] = 'Welcome to Eagle Fruit Alliance (Pty) Ltd';
$data['galleries'] = $this->Gallery_m->get_galleries();
$data['gallery'] = $this->Gallery_m->view($id);
$data['content'] = 'index_view';
$this->load->view('templates/site/template',$data);
}}
Now when I click on the link i would like the gallery to open in a modal how would i achieve this? I have added a modal with the following code where am I going wrong:
Modal
<!-- Modal -->
<div class="modal fade" id="gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"><?= $gallery['name'];?></h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ./Model -->
Because you are interacting with the user's click on an image, this isn't a PHP or HTML question. User interaction always involves javascript/jQuery.
AJAX is a two-part methodology. It is initiated in javascript, and sends data to a server-side PHP file that does something and returns a response, which is received/dealt with in javascript. See this SO post for more information on AJAX.
However, this question doesn't need to use AJAX either, because there is no additional data to fetch.
It's a bit difficult from your code to see exactly how to trigger the modal. Usually, we look for a commonality in the code, such as a class name, to use as the trigger. In your case, you could try:
$('p+img').click()
However, I recommend modifying your code like this:
<img class="mod_trig img-responsive" src="<?php echo base_url() . 'assets/img/site/' . $item['gallery_cover'] ?>" >
Note: I moved the class to front of tag only to make it very visible in this answer. Keep it where it is in your code, if you wish.
Next, when a trigger is clicked, you use CSS selectors (jQuery uses CSS selectors, so learn them -- and Bootstrap uses jQuery, so learn jQuery) to get the href attribute of the <a> tag -- this is the direct link to the desired image, correct? You would only need to use AJAX if you didn't already have some information available to you on the page, but in this case you have all you need.
Use jQuery's .html() method to create an <img> tag inside the Bootstrap modal, replacing whatever was in that particular DIV. Here is a very simple example where we demonstrate exactly this procedure, but instead of putting it into the Bootstrap modal's framework we simply create the <img> tag inside a pre-existing DIV called #msg.
jsFiddle Demo
$('p+img').click(function(){
var i = $(this).next('a').attr('href');
//alert(i);
$('#msg').html('<img src="'+i+'" class="msg" width="200" height="200" />');
});
#msg{position:absolute;top:30%;left:40%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/98/100/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/100/95/animals" />
View the Image
</div>
<div>
<p>This is a test</p>
<img src="http://placeimg.com/95/95/animals" />
View the Image
</div>
<div id="msg"></div>
*It's not a perfect example, because the placeholder image website does not serve the same image when requesting identical parameters, so you can uncomment the alert() line to see that each time you click an image you get different parameters injected into the #msg div -- you get the correct parameters for the <img> on which you clicked.
Now, all you need to do is to inject (via html() method) the newly-created <img> tag into the appropriate Bootstrap div instead of into the #msg div:
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
And trigger the modal to display:
jsFiddle Next Demo
$('.mod-trigger').click(function(){
var i = $(this).next('a').attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Note how in this example I replaced the CSS selector with '.mod-trigger', and created a class on each image with that className
This new example shows you how to trigger the modal if a user clicks on the <a> tag:
jsFiddle Demo
Note that the <a> tag's default action is to navigate to another page. You don't want this, so the first thing you must do is suppress that default behavior:
$('.mod-atag').click(function(e){
e.preventDefault();
var i = $(this).attr('href');
$('.modal-body').html('<img src="'+i+'" class="msg" width="200" height="200" />');
$('#gallery-lightbox').modal('show');
});
Also note that I added a className to each <a> tag to make it easy to detect the click.
Iam trying to have 3 buttons, and when i press one, it will show the content of a php file. This is what i have done so far:
In the main Html file:
<div class="buttons">
<a class="showSingle" target="1">Logg</a>
<a class="showSingle" target="2">Saker</a>
<a class="showSingle" target="3">Rediger Kunde</a>
</div>
<div id="div1" class="targetDiv"><?php include 'php/loggselect.php'; ?></div>
<div id="div2" class="targetDiv">Saker</div>
<div id="div3" class="targetDiv">Rediger </div>
And later in the same file:
<script type="text/javascript">
jQuery(function(){
jQuery('.showSingle').click(function(){
jQuery('.targetDiv').hide();
jQuery('#div'+$(this).attr('target')).show();
});
});
</script>
Have two problems: When I reload the page, all 3 divs are showing, I have to press one of the "buttons" to only show the content of that spesific button.
The next and biggest problem is that this is working fine as long as it is plain text. But when I use <?php include 'php/loggselect.php'; ?> it will no longer show / hide. The php file should display a table with search result from my database. But it does not work when the php only contains `
echo 'testing';
?>` either. Any soulution?
Thanks!
Problem #1: You can do,
CSS: .hiddenDiv {display:none;}
And add this class to every div
$(function(){
$(".showSingle").eq(0).trigger("click");
});
Problem #2: Do
var _var1 = "variableone";
$("#div1").load('php/loggselect.php?v1='+_var1+'&v2='+_var1);
Don't do <?php ... ?>
apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/
I have a php file with html contents and php contents.
<body>
<a href="settings.php" onclick="edit_enable()">
Edit section
</a>
<div class="container" hidden name="Edit">
<section class="ac-container">
<p>This is the Edit Section</p>
</section>
</div>
</body>
and I have a php segment that contains the function edit_enable()
<?php
function edit_enable() {
}
?>
I want this function to be able to access the named 'Edit' and change the visibility along with other properties within.
//UPDATE
I simply added an example as such, my main intention is to access/change the html content, all using the php code.
You have miss-used some of the html attributes as well. You have taken some form attribute values and placed them inside a <div. This is not supported.
I have rewritten your html, placing the hidden in a meaningful style attribute. and renamed the Name attribute to the widely used id attribute. Then i placed a javascript function to toggle the display of the div
<body>
<a href="settings.php" onclick="edit_enable();">
Edit section
</a>
<div class="container" style="display:none;" id="Edit">
<section class="ac-container">
<p>This is the Edit Section</p>
</section>
</div>
<script>
function edit_enable() {
var div = document.getElementById('Edit');
div.style.display = (div.style.display == 'block') ? '' : 'block';
return false;
}
</script>
I am trying to use PHP associative arrays to echo different values for text and images into HTML for different instances of a jQuery slideshow on the same page. Here's the HTML:
<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>This is the text!</p></div>
</div>
<div class='mosaic-image'><img src='imgs/the-img.png'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> `
I wrote arrays for each type of slideshow containing the text and image for each slide, here's and example:
$my_content = array(
'image1.png' => 'image1 text!',
'image2.png' => 'image2 text!'
);
Then I wrote a function with parameters for the category of slideshow and the content:
function gallery_content($content) {
foreach ( $content as $img => $txt ) {
echo "<div class='slide'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
I call it like this: gallery_content($my_content); and it works really well. But when I try to call it again for another set of values, only the first instance seems to work. I tried using the array directly instead of the variable as a parameter AND making a separate function for each slideshow, but keep getting the same results.
Why can't the function be called more than once? Thanks in advance.
My guess would be that PHP is doing its job. Check the source of the outputted document and you should see the proper number of galleries). I suspect that a CSS rule for the class gallery such as one that absolutely positions it is causing only one gallery to be visible. If you're OK with using inline CSS (which is not usually acceptable), you can have PHP add a custom position value (such as top) based on the gallery number:
function gallery_content($content) {
$num = 0;
foreach ( $content as $img => $txt ) {
echo "<div class='slide' style='top: ".(100 + 50*$num)."px'>
<div class='mosaic-block fade'>
<div class='mosaic-overlay'>
<div class='text'><p>".$txt."</p></div></div>
<div class='mosaic-image'><img src='imgs/other/".$img."'/></div>
</div> <!-- mosaic-block fade -->
</div> <!-- .slide --> ";
}
The example above gives the first gallery element a top of 100px (100 + 50 * 0), the second element a top of 150px, the tird 200px, and so on. You also could use some CSS3 and the new calc() feature in place of this, but CSS3 selectors are experimental and not supported in some older browsers. Using PHP and inline styles would be your safest bet.
See the source code that is generated on your final page(HTML) to judge whether PHP did its work or not. i think thats your resultant "galaries"(DIV) might be having the same ID or other attributes thorugh which the jQuery activates them, and so only one is being run properly (the first one), and the second one is not run.
Hope that helps.