<script>
$(document).ready(
function(){
$("#music").click(function () {
$("#musicinfo").toggle("slow");
});
});
</script>
I use this code to show and hide an div but I can only click at the first div the second wont work.
This is the div:
<?php
foreach($result as $tile)
{?>
<div id="music">
<?php echo $tile['Onderwerp']?>
</div>
<div id="musicinfo">
<?php echo $tile['Omschrijving']?>
</div>
<?php }?>
I am trying to put information out of an mysql into 2 divs , 1 for the heading and 1 for information which you can see when you click on the heading div.
You are using same id's in loop, that is wrong and all events only apply for first ID, while others are ignored.
foreach ($result as $title) { ?>
<div class='wrapper'>
<div class='music'></div>
<div class='musicInfo'></div>
</div>
<?php } ?>
jQuery function than will looks like this:
$('.music').click(function() {
$(this).parent().find('.musicInfo').toggle();
});
Related
I'm trying to do something with my Bootstrap .post-title class.
I want to put an element.style background on my post titles, which calls as a background, to the post featured image, for each post. I've already achieve this, but something went wrong and now isnt working. the only thing i know is must look something like this.
<div class="post-featured" style="background-image:url('upload/<?php the_post_thumbnail( 'wpbs-featured' ); ?>')">
but something in the syntax there is wrong, because it render this characters on HTML. whats going on?
')">
live example: WP Featured post image, as a div background
the_post_thumbnail returns an IMG html tag. So the generated code is
<div class="post-featured" style="background-image:url('upload/<img src="path/to/file.png">')">
Definitely not something that could work... You want the url only, so you should do this:
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id,'wpbs-featured', true);
<div class="post-featured" style="background-image:url('<?= $thumb_url[0] ?>')">
this is the actual html snippet working.
<?php
$img = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "full");
$img = $img[0];
?>
<div class="postfeatured" style="<?php if($img){echo 'background:url('.$img.');';} ?>">
<div class="page-header"><h1 class="single-title" itemprop="headline"><?php the_title(); ?></h1>
<h4>
<?php $mykey_values = get_post_custom_values('_aioseop_description');
foreach ( $mykey_values as $key => $value ) {
echo substr("$value",0 ,300); //This will display the first 150 symbols
}?>
</h4>
<hr>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_native_toolbox"></div>
<hr>
</div>
</div>
live example: Design Thinking. Blog de Diseño Gráfico. Picoboero
I have created a database to access the images inside a slider which uses jquery. The problem starts when I try to insert the connection given that it is an array:
<?php
$slides = array(
'<div data-thumb="images/slider/slides/image1_small.jpg" data-src="images/slider/slides/image1.jpg">
<div class="camera_caption fadeFromBottom">
Text 1 below image
</div>
</div>',
'<div data-thumb="images/slider/slides/image2_small.jpg" data-src="images/slider/slides/image2.jpg">
<div class="camera_caption fadeFromBottom">
Text 2 below image
</div>
</div>',
'<div data-thumb="images/slider/slidesimage3_small.jpg" data-src="images/slider/slides/image3.jpg">
<div class="camera_caption fadeFromBottom">
Text 3 below image
</div>
</div>'
);
shuffle($slides);
foreach ($slides as $slides) {
echo "$slides\n";
}
?>
My question is, is there a way to change that array to access the images and the text? I've tried with a while loop but couldn't figure it out.
Update: What I want is to change the array to
<?php
$query = "SELECT * FROM tblslider";
if ($result=mysqli_query($connection, $query)) {
while ($slides = mysqli_fetch_array($result)) {
'<div data-thumb="images/slider/slides/<? echo $row_DataSlider['strImagesmall'] ?>" data-src="images/slider/slides/<? echo $row_DataSlider['strImage'] ?>">
<div class="camera_caption fadeFromBottom">
<? echo $row_DataSlider['strText'] ?>
</div>
</div>'
}
}
?>
obviously this is not possible but im looking for a solution to get something like it
I believe you have a typo in your foreach...foreach ($slides as $slides) (using $slides twice)
I'd put:
foreach ($slides as $s) {
echo $s . "</br>";
}
I have a wordpress site, that need to show pages using swipe, I choose to use Jquery Mobile, and I get it working fine. Now, we have 2 languages on site, using wpml plugin. And my Swipe Code works well, except when we use Change language button swipe fails.
Details on issue.
We have only 3 Text Only page in our website, in 2 language. And in Footer we have link to change language. Also client hate to have Ajax page loading, so what I did is I create three Div with data-role=page and put data-next, data-prev as #div-$postid. So the navigation works absolute fine. I put footer outside from data-role=page.
Now, when I click change button in footer, it load the english page [I saw it using Fiddler] and then take first data-role=page from server and replace /slide its content. However since it only pick the first data role, all other english page doesn't get in HTML [it just update DOM and doesn't navigate to english version]. so swipe fails as other english pages are not in dom.
Also, footer is not changing, so what I want is: can we simple force a Link to navigate instead of going swipe way? Jquery Mobile is enforcing swipe on all A tags, I do not want swipe to works anything outside data-role=page.
Hope I make sense.
Edit here is code: [not sure if this code will help at all]
<?php
get_header();
global $post;
$args = array('post_type' => 'mobile_slide','showposts' => '-1', "order" => "DESC");
$the_query = new WP_Query($args);
if($the_query->have_posts()){
while($the_query->have_posts()) { $the_query->the_post();
$prev =get_previous_post();
$next =get_next_post();
if($prev) {
$prev = "#page-" . $prev->ID; //get_permalink($prev->ID);
} else {
$prev='';
}
if($next) {
$next = "#page-".$next->ID; //get_permalink($next->ID);
} else {
$next='';
}
if (has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'slider_image' ); ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>" style="background-image:url('<?php echo $image[0]; ?>'); background-position:center center; background-color:#000; background-repeat:no-repeat; ">
<?php } else { ?>
<div id="page-<?php echo $post->ID; ?>" data-dom-cache="true" data-transition="slide" class="page" data-role="page" data-prev="<?php echo $prev; ?>" data-next="<?php echo $next; ?>">
<?php } ?>
<div class="post_box">
<h2><blockquote><?php the_title(); ?></blockquote></h2>
<div class="post_entry">
<?php the_content(); ?>
</div>
</div><!-- post_box -->
</div>
<?php }
} ?>
<?php get_footer(); ?>
This is all I have, except that get_footer use Ul li based list where on LI change based on language variable, to show different images for either language.
To stop Ajax from loading pages/links, add to link anchor data-rel="external" or data-ajax="false". This will load page normally without any transition.
Reference: jQuery Mobile - Links
For those who have similar problem, I fix it by using following:
1) I add a "noswipe" class to A Tag so I can refer it in Jquery
2) I add following code
$(function(){
$(".noswipe").click(function(){
window.location.href= $(this).attr("href");
return false;
});
});
The above code simply enforce to skip the Mobile's parsing and calling and works for my case.
I am just wondering if there is anyway to make it so that the css class of a DIV can be changed by the selection of a tick box.
For example I have this checkbox HTML
<input type="checkbox" name="size" id="portrait1" value="portrait"> Portrait
<input type="checkbox" name="size" id="landscape1" value="landscape"> Landscape
and then this div (used on concrete5 so might make no sense to some)
<div class="" style="display: none;">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
but i want it so that when I click portrait, for example, the class of that div changes to say portrait, any way of doing this?
You can do this with a bit of JavaScript.
You'll need to bind an event handler to your checkbox (that is, tell the browser to run a chunk of code when a certain event happens: the event in question being changing the state of the checkbox.)
(Note: I am using jQuery in my example for brevity.)
$("checkbox#portrait1").bind('change', function() {
$("div").toggleClass('portrait', $(this).is(":checked"))
});
The above example binds the given function to the "change" event of the given selector (input#portrait1, i.e. input element with the ID of portrait1).
When that event happens, it then "toggles" the class portrait on the div element based on whether the second argument is true or not, meaning if "this" (the checkbox input) is checked, then the class portrait will be added to that div (if not, remove the class of portrait).
Try this....
$('input[name=size]').click(function(){
if($(this).is(':checked'))
$('div').addClass('test')
else
$('div').removeClass('test')
})
Always have a default id for div like
<div class="" style="display: none;" id="a1">
<?php echo $form->label('content', t('Title'))
?>
<?php echo $form->text('content')
?>
<br>
<br>
<?php echo $al -> file('ccm-b-file', 'fID', t('Choose File'), $bf); ?>
<?php $bf = File::getByID($fID); ?>
<br>
<?php echo $form->label('UserURL', t('URL:'))
?>
<?php echo $form->text('UserURL')
?>
</div>
and in javascript
if(document.getElementById("portrait1").checked == true)
{
document.getElementById("a1").class="portrait";
}
else if(document.getElementById("landscape").checked == true)
{
document.getElementById("a1").class="landscape";
}
I have a function
myfunc(){
?>
<h1>Title</h1>
<div class="container">
<?php if (condition): ?>
<div class="something">more data</div>
<?php endif; ?>
</div>
<?php
}
this function has way more HTML content combined with php if statements inside
Now, i want to store that html content into a variable so i can use it later... now it will simply display the content of the function right away which is not what i want
have a look into php heredoc and nowdoc
it may help
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.nowdoc