I have created one script to find the correct answer and incorrect answer on click event of li I am posting data and fetch response if response is correct_ans at that time only one class will add which is correct-answer and if answer is not correct that I want to add 2 class like which answer they clicked on that href I will add incorrect-answer and I will post correct answer like correct answer is 456 and they select 1234 then I have to show incorrect-answer on 1234 href and correct-answer on 456 href
I have added my code given below in that I have to try siblings but it is not working and shows error: Uncaught ReferenceError: sibling is not defined
$(this).find("a").addClass("active");
var answer = $(this).find("p").html();
//console.log(ID);
$.post('functions.php', {
answer: answer
}, function(data) {
//console.log(data);
if (data != 'correct_ans') {
console.log(data);
if ($(".active").siblings("ul").$('li[text="' + data + '"]').length > 0) {
alert('F');
} else {
alert('no F');
}
$(".active").addClass("incorrect-answer");
} else {
console.log(data);
$(".active").addClass("correct-answer");
}
//$(".answer-list").css("pointer-events","none");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<ul class="answer-list" id="answer_list1">
<li>
<a tabindex="1" id="question1">
<span class="letter-option">A.</span>
<div>
<p>123</p>
</div>
</a>
</li>
<li class="active">
<a tabindex="2" id="question1">
<span class="letter-option">B.</span>
<div>
<p>456</p>
</div>
</a>
</li>
<li>
<a tabindex="3" id="question1">
<span class="letter-option">C.</span>
<div>
<p>789</p>
</div>
</a>
</li>
<li>
<a tabindex="4" id="question1">
<span class="letter-option">D.</span>
<div>
<p>1234</p>
</div>
</a>
</li>
</ul>
<ul>
</ul>
so can anybody help me in this.
I have found an answer
Use this
$("a:contains("+data+")").addClass("correct-answer");
Related
I hava a page having multiple picture in grid view loaded though a php loop as follows
<?php if($rows){
$i = 0;
while($resImage = mysqli_fetch_array($fetchImg)){?>
<div class="col-md-4">
<div class="user-box">
<h6 class="view-gallery-btn"><?php echo $resImage['image1']; ?></h6>
<?php $imgPath = base64_decode($_REQUEST['gallyId'])."_".$_SESSION['unique_id']; ?>
<i class="fa fa-cloud-download" aria-hidden="true"></i>
<img src="poweradmin/Gallery/<?php echo $imgPath?>/<?php echo $resImage['image1']; ?>" alt="" class="img-fluid">
<ul class="new-gallery-btn add-listing-gallery">
<li>
<i class="fa fa-star" aria-hidden="true"></i>
</li>
<li>
<i class="fa fa-trash-o" aria-hidden="true"></i>
</li>
<li>
<input name='ids[]' type='checkbox' id='ids' class="form-check-input custom-check-box checkboxes" value="<?php echo $resImage['id']; ?>">
</li>
</ul>
</div>
</div>
<?php } } ?> `
each image has a star icon that invokes an Ajax code as follows
$("a.redFav").click(function(){
var current = this ;
var status_id = $(this).attr('href').split('=');
var arr = status_id[1];
$.ajax({
type:'post',
url:'addUserPics.php',
data:{arr: arr},
success:function(msg){
console.log("User Like Applied");
$(current).toggleClass("user-fav");
}
});
return false;
});
this calls a php file that updates the corresponding field in the database but the issue is that if there are many images in the page ( ie around 100+ ) and some of them are selected (ie the icon calling Ajax is clicked ) eg 10 only few of them are updated. Each time the success stats are different it seems that its due to Ajax call delay or incomplete calls.
Kindly suggest a way to handle the same.
I have been working for the past couple days trying to figure out sortable lists. I am working on a project that will allow the user to order out a nav/menu by dragging the links to the place they want them including a sub menu ( dropdown ). I have gone through dozes of stackoverflow posts and Googled as much as I can. I have it somewhat where I want it but I cannot get it to alert the full string of ids from the main and sub menu. Ideally I want a serialized string of the whole thing that I can store in the database. Here is what I have, I have been mixing and mashing all day so I tried to strip out what I know isn't needed for this, any help would be greatly appreciated.
I use the Jquery UI for this along with Bootstrap 3.
<div id="example5">
<ul class="list-group">
<li id="1" class="list-group-item menlink">11111</li>
<li id="2" class="list-group-item menlink">22222</li>
<li id="3" class="list-group-item menlink">33333</li>
<li id="4" class="list-group-item menlink">44444
<ul class="list-group">
<li id="6" class="list-group-item menlink">66666</li>
<li id="7" class="list-group-item menlink">77777</li>
<li id="8" class="list-group-item menlink">88888</li>
<li id="9" class="list-group-item menlink">99999</li>
</ul>
</li>
<li id="5" class="list-group-item menlink">55555</li>
</ul>
</div>
<script>
$("#example5 ul").sortable({
connectWith: "#example5 ul",
placeholder: "ui-state-highlight",
update : function(event, ui) {
var order = $(this).sortable('toArray').toString();
alert(order);
}
});
</script>
An html element can not begin with a number. You need to add some kind of text before the numbers in each li ID.
I changed just a little bit of your code.
$("#example5").sortable({
connectWith: "#example5 ul",
items: "li",
placeholder: "ui-state-highlight",
update : function(event, ui) {
var order = $(this).sortable('toArray').toString();
var serial = $(this).sortable('serialize');
alert(order);
alert(serial);
}
});
Here is a fiddle.
I need the hover function on "type of worker" and "where do you work?" on the right sidebar (under the contact for) to be a lot cleaner. What i need is for the child ul to remain visible when i hover over the ul and not just the parent link right now if i mouse out of the parent link
Here is my code
<div class="nav_item">
<div class="nav_item_link" id="clickMe2" href="#"><img src="http://50.28.46.210/dev/obryan/wp-content/themes/wp-foundation/images/compassicon.png" class="nav_icons">
<h5>Where Do You Work?</h5></a>
</div>
<ul id="clickEvent2" class="worker_list">
<li>Pacific Ocean</li>
<li>Atlantic Ocean</li>
<li>Gulf of Mexico</li>
<li>Bering Sea</li>
<li>Great Lakes</li>
<li>International Waters</li>
<li>Mississippi River</li>
<li>Ohio River</li>
</ul>
</div>
And here is my jquery
$(document).ready(function(){
$('#clickMe').hover(function() {
$("#clickEvent").fadeToggle("slow");
});
Posting as an answer as requested: http://jsfiddle.net/hgEV9/
$('#clickMe').on("mouseenter",function() {
$("#clickEvent2").fadeToggle("slow");
})
HTML:
<div class="nav_item">
<a class="nav_item_link" id="clickMe" href="#"><img src="http://50.28.46.210/dev/obryan/wp-content/themes/wp-foundation/images/compassicon.png" class="nav_icons"></a>
</div>
<h5>Where Do You Work?</h5>
<ul id="clickEvent2" class="worker_list">
<li>Pacific Ocean</li>
<li>Atlantic Ocean</li>
<li>Gulf of Mexico</li>
<li>Bering Sea</li>
<li>Great Lakes</li>
<li>International Waters</li>
<li>Mississippi River</li>
<li>Ohio River</li>
</ul>
</div>
I'm still new to Front End Development and working on my first really big site / wordpress blog.
So my question is this, I have a Menu that will be the same on all pages on the site. However each section will have it's name highlighted in the Menu Nav.
Current Nav_Bar markup:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li">Home</li>
<li class="nav_li">About</li>
<li class="nav_li selected">Blog</li>
<li class="nav_li">Book</li>
<li class="nav_li">Media</li>
<li class="nav_li">Events</li>
<li class="nav_li">Services</li>
<li class="nav_li">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
Now I've build pages before using this simple PHP code: <?php include("menu.php"); ?>
However, how would you guys 1st: organize this menu to accept and incoming value, like menu.php+select="home" and 2nd how would you pass in that value to add a class of selected to one of the Menu items?
First off your class on li "nav_li" is redundant and could be removed. Use .nav li in place to ref these list items with less lines of code. This works both as a JQuery selector and CSS selector. Second, to answer you actual question; I would use the active class as follows:
// Assuming the following html. <ul class="nav"><li>About</li></ul>
$('.nav li').click(function() {
$('.nav li.active').removeClass('.active');
$(this).addClass('.active');
window.location = $(this).children('a').attr('href');
return;
});
Now in the area where you keep your navbar you check to see if the current url is active by the following:
<?php
$currentUri = $_SERVER['REQUEST_URI'];
<ul class="nav">
<li class="<?php if($currentUri == '/about.php') {echo 'active';} ?>">About</li>
</ul>
Add the condition in the php script to each list item.
Sincerely,
Kevin
I assume you want your 'incoming value' for the purpose of highlighting a menu item (rather than displaying a particular page)? It's unnecessary, because the browser already knows what page it's on.
This is one way of highlighting the current page in jQuery:
$('.nav li a').each(function(){
var link = $(this).attr('href'),
current_page = location.href;
if(current_page.indexOf(link) != -1) {
$(this).addClass('current-page');
}
});
Before the include, set a value in some parameter, like $page = 'blog' and then in the menu.php
<li class="nav_li<?php echo $page === 'blog' ? " selected='selected'" : "" ?>">Blog</li>
This can be done using javascript
var url=document.location.toString();
if(url=="http://www.something.com/some.php")
{
//code to add class to specific link
}
else if(url=="http://www.something.com/someelse.php")
{
//code to add class to specific link
}
You can also do this on server side in menu.php
$url=$_SERVER['REQUEST_URI']
Then check the url and add class name accordingly
If I'm understainding what you're after, maybe something like:
index.php:
<?php
$page = 'home';
// page code ...
?>
about.php:
<?php
$page = 'about';
// page code ...
?>
etc, etc...
Then menu.php tweaked slightly:
<div id="nav_bar">
<ul class="nav">
<li class="nav_li home">Home</li>
<li class="nav_li about">About</li>
<li class="nav_li blog">Blog</li>
<li class="nav_li book">Book</li>
<li class="nav_li media">Media</li>
<li class="nav_li events">Events</li>
<li class="nav_li services">Services</li>
<li class="nav_li contact">Contact</li>
<li class="search">
<input type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" />
</li>
<li class="search_btn">
<div class="search_button">Go</div>
</li>
</ul>
</div><!-- nav_bar -->
and finally some javascript:
<script>
$(function () {
$('#nav_bar li.<?=$page?>').addClass('selected');
});
</script>
That assumes jQuery is being used, but it isn't necessary obviously, the same could be done with straight javascript.
so I have my main layout as such:
<div class="menu">
<?php include('/menu.php'); ?>
</div>
<div class="main" id="content">
<?php include('/home.php'); ?>
</div>
In the menu.php I have 4 divs set up as such:
<div class="link current">
<a href="#" class="home">
Home
</a>
</div>
<div class="link">
<a href="#" class="about">
About
</a>
</div>
<div class="link">
<a href="#" class="forums">
Forums
</a>
</div>
<div class="link">
<a href="#" class="contact">
Contact
</a>
</div>
And I'm including this .js file in the head of the index page
$(function () {
$('div.link a').click(function () {
$('div.link').removeClass('current');
$(this).closest('div.link').addClass('current');
if($('div.link a').hasClass('home')) {
$('#content').load('/home.php');
} else if($('div.link a').hasClass('about')) {
$('#content').load('/about.php');
} else if($('div.link a').hasClass('forums')) {
$('#content').load('/forums.php');
} else if($('div.link a').hasClass('contact')) {
$('#content').load('/contact.php');
} else return false;
});
});
But it doesn't work.
I'm new to all of this and have pieced this code together using varied sources on the internet, after trying it myself and not being able to figure it out, I've come for help.
The hierarchy of the site is as such.
-/
-res/
-css/
-default.css
-imgs/
-scripts/
-jquery.js
-load.js (this is the one shown above)
-index.php
-menu.php
-home.php
-about.php
-forums.php
-contact.php
If anyone can provide help, it will be greatly appreciated.
The first condition in your if statements is checking to see if any "div.link a" has the class "home". Therefore the first if condition is always true and you're always loading /home.php into #content. What you want to do is check to see if the link that was clicked has the class.
You should use if($(this).hasClass('home')) { ...
Also, if you want to clean things up a bit, I would suggest:
$('div.link a').click(function () {
$('div.link').removeClass('current');
$(this).closest('div.link').addClass('current');
$('#content').load('/' + $(this).attr('class') + '.php');
});
This way you don't have to maintain the if statements. Though, if you end up adding more classes to those links, this will break. Perhaps use a data-* attribute? <a href="#" data-load="contact">...