I'm trying to grab the first <div> of a set created by a php command, the problem is I can't seem to get the function to work or run after the divs have been created.
The php creates 5 <div>s when the page loads and i want to hide the first one.
Here is an example I made to help you:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>StackOverflow :: Help</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('div.mydiv:first').hide();
});
</script>
</head>
<body>
<?php
echo "<div class='mydiv'>DIV 1</div>";
echo "<div class='mydiv'>DIV 2</div>";
echo "<div class='mydiv'>DIV 3</div>";
echo "<div class='mydiv'>DIV 4</div>";
echo "<div class='mydiv'>DIV 5</div>";
?>
</body>
</html>
You can try this example and see that the first div is actually hidding when the page loads. Hope this helps you.
You can try the following, give each div a class, like this:
<div class="mydiv"></div>
After that, with jQuery you can hide the first div like this:
$(document).ready(function() {
$('div.mydiv:first').hide();
});
If you have a unique id, you can get to the element like so:
<div id="div1"></div> <!--get this div -->
<div id="div2"></div>
$('#div1').hide();
Otherwise, if you have a class name associated with the group of <div>s, you can access the first one like so:
<div class="myClass"></div> <!--get this div -->
<div class="myClass"></div>
$('.myClass')[0].hide();
If you don't have any class or id for the <div>, you can access it like this: var myDiv = $('div')[i];, where i is the zero-based index number for the <div> that you want if you were to place all the <div>s in your webpage in order in an array. For example, if the <div> you want to access is the 2nd div that occurs on the page, you would access it using var myDiv = $('div')[1];
<div id="randomDiv"></div>
<div></div> <!--get this div -->
<div></div>
$('div')[1].hide();
As you might have noticed, the way you select elements by id, class, and tag in JQuery is identical to the way you would reference those items with CSS.
Related
I want to hide a div from direct users but showing the same div to those who come from example.com
eg.
example123.com/article.php have below div
<div id="main">Title</div>
(when user click on a hyperlink on example.com
Artile
then show the above div
but when user come directly to example123.com/article.php then don't show the div.
how will I do that using php?
Hi you can use the following code like this.
<?php if (isset($_SERVER['HTTP_REFERER'])){ ?>
<div style="width:200px;height:200px;border:1px solid black">
<?php } ?>
You need to make use of $_SERVER['HTTP_REFERER']
I don't totally follow your question but this code should be enough for you to adapt to your needs:
if(strstr($_SERVER['HTTP_REFERER'],'example.com')) {
echo '<div id="main">Title</div>';
}
So, if the referrer URL contains example.com then echo your div.
If the referral URL didn't contain example.com or was empty (i.e. they arrived directly at your site) then the div won't show.
You can achieve this by passing an argument from the URL. The value of the argument will be null if they access the page directly and only have a value if they use the specific URL. Then your PHP can just check the argument and handle it accordingly.
Example as follows.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
</head>
<body>
<h1>Nothing 01</h1>
Regular URL
<br />
Argument URL
</body>
</html>
Then you can handle the Arguments in your PHP page containing the div
pagewithdiv.php
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
</head>
<body>
<h1>Nothing 02</h1>
<div id="conditional">
<h2>Conditional Div</h2>
</div>
<?php
if (
// check if argument exists
isset($_GET["Condition"])
&&
// check if argument value is true
trim($_GET["Condition"] == true)
) {
echo '<script>';
echo 'document.getElementById("conditional").style.display = "block"';
echo '</script>';
} else {
echo '<script>';
echo 'document.getElementById("conditional").style.display = "none"';
echo '</script>';
}
?>
</body>
</html>
Keep in mind though that this is only hiding the div, it still exists on the page. If you want it to be completely gone then instead of using javascript to change the visibility you can echo the code that makes up the div if the requirements are met.
<!DOCTYPE html>
<html>
<head>
<title>Nothing</title>
</head>
<body>
<h1>Nothing 02</h1>
<?php
if (
// check if argument exists
isset($_GET["Condition"])
&&
// check if argument value is true
trim($_GET["Condition"] == true)
) {
echo '<div id="conditional">';
echo ' <h2>Conditional Div</h2>';
echo '</div>';
}
?>
</body>
</html>
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 ... ?>
I have the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TestPost</title>
<script src="jquery-2.1.4.min.js"></script>
<script src="more.js"></script>
</head>
<body>
<div class="post1">
This is post one
</div>
<div class="post1">
Another post number one
</div>
<div class="post2">
And this is post two
</div>
<div class="post3">
Last but not least, post three
</div>
</body>
</html>
What i'm looking for is the folowing:
When the text in a div is longer that, lets say, 5 chars, it should cut it off and add ...read more(including a link to a page).
I tried some PHP and some JQuery, but to be honest, I'm not sure anymore what to use.
If I could get the answer, that would be fantastic, but a push in the right direction would be very appreciated as well :)
Edit: The second post1 was added for testing purposes for anyone who's wondering.
Use attribute class instead of id. replace id='post' with class='post'
Use this code into your more.js
var mess_content = $('.post');
mess_content.each(function(){
if ($(this).text().length > 120) {
var obrtext = $(this).text().substr(0,120) ;
$(this).html(obrtext+"<a href='#'>read more</a>") ;
}
});
To do this with PHP, when you ouput your text, run it through a shortening function like this:
function shorten($output, $limit = 5) {
$output = htmlspecialchars($output, ENT_QUOTES, 'UTF-8');
if (strlen($output) > $limit) {
$output = substr($output, 0, $limit) . ' ... read more';
}
echo $output;
}
You can use it then like this:
<div id="post1">
<?php shorten('This is post one'); ?>
</div>
I read this article - Get DIV content from external Website . I get source of website with file_get_contents() function and I have to extract from it content of two divs with same class name.
I have very similar problem, but with divs with same class name. E.g. I have code like that:
<div class="baaa">
Some conete
</div>
<div class="baaa">
Second Content
</div>
I want to get both content of both these divs. Solution accepted in article I linked support only one. My expected result is array like this:
$divs[0] = "Some conete"
$divs[1] = "Second Content"
Please give me advice what to do. I read about DOMDocument class, but have no idea how to use it.
i have used the simple html dom parser and your content can be extracted as
$html = file_get_html('your html file link');
$k=1;
foreach($html->find('div.baaa') as $e){
$divs[$k]=$e;
$k++;
}
echo $divs[1]."<br>";
echo $divs[2];
You could use XPath. XPath is a query language for XML. There are PHP functions that support Xpath.
For you the example could be:
File test.html:
<html>
<body>
<div class="baaa">
Some conete
</div>
<div class="baaa">
Second Content
</div>
</body>
</html>
The php code that extracts contents of divs with the class "baaa"
$xml = simplexml_load_file('test.html');
$data = $xml->xpath('//div[#class="baaa"]/text()');
foreach($data as $row) {
printf($row);
}
generates the following output:
Some conete
Second Content
Look for XPath tutorials if you need more complex searching or analyzing.
Try it with your data:
$file_contents = file_get_contents('http://address.com');
preg_match_all('/<div class=\"baaa\">(.*?)<\/div>/s',$file_contents,$matches);
print_r($matches);
BTW: Polska rządzi :)
<script type="text/javascript">
$(document).ready(function(){
$('.baaa').each(function(){
alert($(this).text());
});
});
</script>
<div class="baaa">
Some conete
</div>
<div class="baaa">
Second Content
</div>
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>