I want to randomly display three divs (of the same class ".post-content") from a specific url.
I can display contents of a div from another url (with consent) using the following code, but it lacks the randomisation I need:
<script>
$(function(){
var contentURI= 'http://www.example.com/ .post-content';
$('#response').load('grabber.php?url='+ contentURI);
});
</script>
<?php echo file_get_contents($_GET['url']); ?>
<div id="response"></div>
EDIT This currently outputs a url with just the one div of that class. I need it to output x3 divs of the same class at random.
My skills are somewhat lacking to mash other code I've found into one concise code. Any assistance you can provide would be greatly appreciated. Thank you.
Found the answer...
JQuery
$.get("https://www.example.com", function(data) {
var $quotes = $(data).find(".container-articles-5"),
count = $quotes.length,
$random = function() {
return $quotes.eq(Math.floor(Math.random() * count));
};
$(".blog-ad-1").append($random);
});
HTML
<aside class="blog-ad-4">
<div class="blog-ad-5">
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
</div>
</aside>
Related
I am trying to create a show/hide toggle button using jQuery. It seems to work, until I close the div that the button is within, making the two elements in different divs.
For example, the below works:
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
<div class="filter-hide">
<p>CONTENT</p>
</div>
</div>
But this code does not:
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
</div> <!-- THIS CLOSING DIV HAS BEEN ADDED -->
<div class="filter-hide">
<p>CONTENT</p>
</div>
JQuery is as follows:
$(".filter-hide").hide();
$("button.reveal").click(function(){
$(this).toggleClass("active").next().slideToggle();
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
Can anyone tell me why this is and how to fix it? The reason I am doing this is because I need the button to be 1/3 of the page and then the content to show full width below. I can work around it but then come across other problems.
Thanks in advance.
You can traverse up to parent div using .closest() then use .next() to target its sibling.
$("button.reveal").click(function () {
$(this).closest('div').next().slideToggle();
$(this).toggleClass("active");
//Rest of code
});
$("button.reveal").click(function() {
$(this).closest('div').next().slideToggle();
$(this).toggleClass("active");
//Rest of code
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col span_1_of_3">
<button class="reveal">Show Filters</button>
</div>
<!-- THIS CLOSING DIV HAS BEEN ADDED -->
<div class="filter-hide">
<p>CONTENT</p>
</div>
You're using .next() which gets the next sibling. As it's no longer a sibling, it no longer finds it.
Your best bet if the control/content are in separate locations is to pair them up. You can do this with a class or a data- attribute, eg:
<div>
<button class="reveal" data-content='filter1'>Show Filters</button>
</div>
<div class="filter-hide" data-filter='filter1'>
<p>CONTENT</p>
</div>
Then your button click code would be:
$("button.reveal").click(function() {
var filter = $(this).data("content");
$(this).toggleClass("active");
$(".filter-hide[data-filter=" + filter + "]").slideToggle();
Using the pattern, you can add/remove buttons and content and never have to change your javascript to handle them individually and, more importantly, you won't need to change your javascript if you change the HTML again, which you would have to if you used any form of traversing (eg .closest().next().find() would work if this scenario, but not if you changed the html).
Since you are using next() to get to the another button, closing the div on the 1st button no longer makes it available. So that you can target the div no matter where you put it on, use the following:
$("button.reveal").click(function(){
$(this).toggleClass("active");
$('.filter-hide').slideToggle(); //Change here.
if ($.trim($(this).text()) === 'Show Filters') {
$(this).text('Hide Filters');
} else {
$(this).text('Show Filters');
}
return false;
});
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 have this code
<?php
if(!empty($auction['Auc']['beginner'])){
?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner</label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$("#trigger_beginner").tooltip();
});
</script>
<?php
}
?>
Issue is when I have two auctions with same auction type for e.g like beginner in this case, then tooltip is only working for one auction. I want it to display tooltip on all similar auctions..
Change your code to use this:
<?php if(!empty($auction['Auc']['beginner'])){?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner </label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$(".trigger_beginner").tooltip();
});
</script>
<?php } ?>
ID has to be unique so you need to use different IDs or a class instead.
ID of elements should be unique. No two elements should have same ID. You should use CSS class as your jquery selector
$(function() {
$(".yourCssClassName").tooltip();
});
Assuming all your auction items has the class yourCssClassName
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 am trying to add a new div to the page when you click on NEW DIV?
How could I do this? Can someone point me in the right direction?
More example code is always helpful, but I'll try to give you some basics.
<div id="Content">
<button id="Add" />
</div>
$(function () {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
There are a bunch of different ways, it depends on what you want to do. A simple way is like this:
$('#id').html('<div>Hello</div>')
Which replaces the inner html of item with id 'id' with "Hello". So this:
<div id='id'>Old Html </div>
Would become:
<div id='id'><div>Hello</div></div>
And this:
$('#id').after('<div>Hello</div>')
Would transform the "Old Html" into this:
<div id='id'>Old Html</div>
<div Hello </div>
Check out www.visualjquery.com and select the Manipulation button. It gives you more than you could need to know in an easy to explore fashion.
Make sure to use the $(document).ready function in jQuery. You need this to "run" the script once your page is loaded and enable the action that is being called on this dummy button to append a new div to an existing div.
You can also use this to append anything you'd like to other elements on the page by using jQuery selectors such as .class or #id.
<div id="Content">
<button id="Add" />
</div>
$(document).ready(function() {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
Another useful option is to replace the contents of a tag with jQuery. You can do this using the .html() function.
<div id="Content">
<p id="changed">Hello World!</p>
<button id="change_content" />
</div>
$(document).ready(function() {
$('#change_content').click(function () {
$('#changed').html('Goodbye World');
});
});
Hope this helps!