How to display in a jquery script in a main page slider? - javascript

Lately I try to make a script which grab news from my facebook wall and post on my website.
With some research and some edit resulted this: example
Now, I want to put this script in the middle slider of this page
Connections are all right (js/css/script), but doesn't appear.
This is the sequence of slider part: (In slider are displayed also news manually introduced in database.)
<div id="middle_article">
<div class="jcarousel-prev-vertical" style="left:63px;"></div>
<div class="jcarousel-next-vertical" style="left:63px;"></div>
<ul id="stiri" class="jcarousel jcarousel-skin-tango">
<?php
$result_other_news = mysql_query("SELECT * FROM `stiri` WHERE `status` = '1' AND `lang` = 'ro' ORDER BY `data` DESC LIMIT 1,10");
while($row_other_news = mysql_fetch_array($result_other_news)){
$link_stire = 'http://www.aepado.ro/stiri/'.friendly_url($row_other_news['titlu']).'-'.$row_other_news['id'].'.html';
?>
<li>
<?php echo substr($row_other_news['titlu'], 0, 75); ?>
</li>
<?php } ?>
</ul>
</div>
Head part of my index page (correspondence with my problem):
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="http://aepado.ro/css/jquery.neosmart.fb.wall.css" rel="stylesheet" type="text/css"/>
<script src="http://aepado.ro/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://aepado.ro/js/jquery.neosmart.fb.wall.js" type="text/javascript"> </script>
<script type="text/javascript">
function(){
$('#example1').fbWall({ id:'***',accessToken:'***'});
});
</script>
And, this is sequence to display script:
<div id="example1"></div>
Finally, i will thank you in advance, and if you need some more information i will gave you with pleasure.
Best regards,
Cosmin

did you initialize jcarousel?
$(function(){
('#mycarousel').jcarousel();
});

Related

how to find specific class in WP

I have a text that I would like to change ("Happy Clients" in the code below). I tried to find the text on the WP dashboard and in the template editor but with no luck, how can i locate the class so I'll be able to change the text?
<div class="_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
<script type="text/javascript">
EDIT
I found a file that contains the following code that is related to text that i want to change:
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"><?php the_field('text_for_count'); ?></span></div></div>
<script type="text/javascript">
var endVal = <?php the_field('count'); ?>;
var numAnim = new CountUp("targetElem", 0, endVal - 300, 0 , );
numAnim.start(function() {
numAnim.update(endVal);
});
</script>
You can install Query Monitor plugin. It has a section called Template which shows all template files that have been used to load the page. That should help you to find what you need.
Example output
Using jQuery you can do this :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".count-description").text("No Clients");
});
});
</script>
</head>
<body>
<button>Click me</button>
<div class="enigma_slider_shadow"></div>
</div><!-- /.carousel -->
<div class="count"><div class="count-info"><strong id="targetElem">0</strong><span class="count-description"> Happy Clients</span></div></div>
</body>
</html>

capturing url and loading that urls contents into the same or different div

Wanted to know if it is possible and if so where am i failing on capturing a url and displaying the contents of that file into a div on the same page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<p id = "heading">Is Nursing For You?</p>
<br/>
<div id = "div1" align="center"></div>
</div>
<div data-role="footer" id = "foot" data-position="fixed">
</div>
</div>
$(document).ready(function() {
$("#div1").load('FONWVhp.php', function() {
$('#div1 div.center-wrapper a button').click(function(event){
event.preventDefault();
($(this).parent().attr('href'));
$("#div1").load(($(this).parent().attr('href'))'articles.php',
function() {
});
});
});
});
</script>
</body>
</html>
fonwvhp.php
index.html loads pages hrefs(which are pointed to articles.php?pageId...)once the page is clicked i want the href to load into the div1 tag and display the href results.
$sqlPAQuery = "SELECT pages.pageId, pages.pageTitle FROM pages order by
pages.pageId";
$paqueryResult = mysqli_query($conn,$sqlPAQuery);
while ($paqueryRow = mysqli_fetch_object($paqueryResult))
{
$pages = "<div class='center-wrapper'><a href = articles.php?
pageId=".$paqueryRow->pageId."><button class= center-
wrapper'>".$paqueryRow-
>pageTitle."</button></a><br/><br/></div>";
echo $pages;
}
articles.php
this is the page i would like to be placed in div1 tag after page href is clicked
$sqlARTICLEQuery = "SELECT * FROM articles where pageId=".$_GET['pageId']."
order by articleId";
$articlequeryResult = mysqli_query($conn,$sqlARTICLEQuery);
while ($articlequeryRow = mysqli_fetch_object($articlequeryResult))
{
$articles ="<div id = 'div1' class='center-wrapper'><a href = article.php?
articleId=".$articlequeryRow->articleId."><button id
='wrapper'>".$articlequeryRow->articleTitle."</button></a><br/><br/></div>";
echo $articles;
}
This is a guess but most likely you forgot the / or you have the ) in the wrong spot
Change
$("#div1").load(($(this).parent().attr('href'))'articles.php'
To
$("#div1").load(($(this).parent().attr('href')+'/articles.php')
These 2 lines
($(this).parent().attr('href'));
$("#div1").load(($(this).parent().attr('href'))'articles.php',
The first line is useless. Delete it.
The second line. You're getting the href of the parent element to the button that was clicked in content loaded from FONWVhp.php (which you didn't post, by the way so I have to guess what it is). To that you are trying but failing to append 'articles.php'.
// Delete me ($(this).parent().attr('href'));
$("#div1").load($(this).parent().attr('href') + 'articles.php',
Note that this will work fine as long as the href always ends in a slash. If it doesn't, which might be likely (depending again on what the mysterious FONWVhp.php contains) then you will have to figure that out too (by putting a slash in, most likely).

Dynamically changing <DIV> using jquery fails

I have created two simple pages as a test.
The first, PIG_TEST.htm, outputs a simple page containing 3 <DIV> sections; Header, Menu and Main.
The Menu section contains a link which, when selected should load the second page, PIG_TEST_1-php, into the <DIV> with the id of 'mainx', on the main page via a jquery click function.
However, when selected it just replaces the original page.
Seems like it is not finding or seeing the "mainx" div.
<!DOCTYPE html>
<html lang='en'><head>
</head>
<body style='background-color:#eeeecc'>
<div style='background-color:#6495ed; height: 110px;'>
<div class='col-md-12 text-center'>Header TEST PAGE
</div>
</div>
<div style='background-color:#ffaaaa; height: 150px;'>
<div class='col-md-12 text-center'>Menu TEST PAGE
<ul>
<li><a href='PIG_TEST_1.php' id='but1'>Item 1</a></li>
</ul>
</div>
</div>
<div id='mainx' style='background-color:#cccccc; height: 300px;'>
Main TEST PAGE
</div>
<script type='text/javascript' charset='utf-8'>
(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
<script src='js/jquery-1.8.0.min.js'></script>
</body></html>
The PIG_TEST_1.php is:
<?php
echo "<body>";
echo " THIS IS A DUMMY PAGE <br></p>";
echo "</body>";
?>
I've tried putting the call to "jquery-1.8.0.min.js" just after the <body> but it stll fails.
Sorry, I'm new to jquery, any help would be appreciated.
You should move the jquery <script> tag outside of the other one (you have it nested), and you also need a $ symbol before (document).ready:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>
There are lot of problems with your code!
<script> cannot be contained inside another <script> tag.
Load jQuery before calling the function.
Add $ before (document).
So your code should be:
<script src='js/jquery-1.8.0.min.js'></script>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('#but1').click(function(e){
e.preventDefault();
$('#mainx').load(this.href);
});
});
</script>

Beginner AJAX search function

I am working on a instant search function, currently i am having trouble passing the variable from JS to PHP file. I am also unsure about what to do once i have the results from the query. Any help would be fantastic. This is my current standing.
ERROR
Undefined index: partialSearch in \php\search.php on line 4
test.php
<?php
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AJAX SEARCH</title>
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function search(partialSearch){
$.ajax({url:"PHP/search.php",data: partialSearch,success:function(result){
$("#results").html(result);
}});
};
</script>
</head>
<body>
<div class="container">
<div class="one-third column index">
<h3>Search Our Site</h3>
<p>Simply type into the search bar below the video, article you are looking for.</p>
<input type="text" name="partialSearch"onkeyup="search(this.value)"/>
<div id="results"></div>
</div>
</div>
</body>
</html>
search.php
<?php
include 'config.php';
$partialSearch = $_POST['partialSearch'];
$stmt = $mysqli->prepare("SELECT Name FROM videos WHERE Name LIKE ? ");
$stmt->bind_param('s',$partialSearch);
$stmt->execute();
$stmt->bind_result($Name);
while ($row = $stmt->fetch()) {
$searchResults[] = $Name;
echo "<div>".$searchResults."</div>";
}
?>
You should change
data: partialSearch
to
data: {partialSearch: partialSearch} // or {"partialSearch": partialSearch}, which is the same
Where partialSearch is the data's index name.
1.) You did not tell jQuery to post, e.g.
$.ajax({ type: "POST", ... });
You can also use the shorthand ".post" :
$.post{url:"PHP/search.php",data: partialSearch,success:function(result){ $("#results").html(result);
2.) The PHP thinks of a named POST variable. So your partialSearch must be an object like so
partialSearch = { partialSearch : "I AM your variable, NOT the object holding me !!!" }
By default, $.ajax calls sends a GET request, so your $_POST is not valid in your .php file, unless you specify a ..type:"POST".. variable in your $.ajax(.. settings.
Secondly, you need to change this:
$.ajax({url:"PHP/search.php",data: partialSearch,success:function(result){
to this:
$.ajax({url:"PHP/search.php",type:"POST",data:{partialSearch:partialSearch},success:function(result){
It's perfectly ok to pass an object of variables to send.

Remove all href links using jquery

I am trying to remove all the links from a parsed site which has then had a div removed and placed in the main code. The problem is that I am trying to remove all the 'href' links in the extracted div but am unable to get anywhere. I have tried using 'CSS' and works but only in chrome and I have to use IE. I have looked at 'php simple html dom' parser to see if i could do it before the file is saved but can't get anything to work. so my last resort is to use 'jquery' but the problem is that the links to remove is being extracted from the file and is not directly in the code. If anyone could help me I would really appreciate it. below is the code I am using.
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-language" content="en">
<meta name="viewport" content="width=500" />
<title>example News</title>
<link rel="stylesheet" type="text/css" href="site/wwwRand1.css">
<?php
include( 'site/simple_html_dom.php');
$html=file_get_html( 'http://example.com/home.php');
$html->save('site/result.htm')
?>
<script type="text/javascript" src="site/jquery.js"></script>
<script type="text/javascript">
$('document').ready(function() {
$('#postsArea').load('site/result.htm #postsArea');
});
</script>
</head>
<body>
<div id="wrap">
<div id="postsArea"></div>
</div>
</body>
Just remove the href attribute from the <a /> tags
$("#postsArea").load( "site/result.htm", function() {
$("#postsArea a").removeAttr("href")
});
If you still want the tags to appear clickable...
$("#postsArea a").removeAttr("href").css("cursor","pointer");
Hope this helps
Try this:
$('document').ready(function () {
$.ajax({
url : 'site/result.htm',
dataType: 'html',
success : function(html){
$html = $(html).find(a).attr("href", "");
$("#postsArea").html($html);
},
error : function(){
$("#postArea").html("<div>No Data Found.</div>");
}
})
});
Here's how I did it:
$(function() {
$('a[href]').each(function() {
var link = jQuery(this);
link.after(jQuery('<span/>').text(link.text()));
link.remove();
});
});
It replaces Foo with <span>Foo</span>.

Categories