|
I have some sort of similar markup as shown in last.
I want to filter the inner text elements based upon ids innerfilter1, innerfilter2.
I have also written code for hide general content based upon the outer filter. i.e. myid1 and myid2 which works fine. Here ids will hide divs have same classes
$('ul.nav.nav-tabs>li>a').click(function(){
var curtab = $(this).attr('href').substring(1);
console.log(curtab);
$('.tab-content .tab-pane').each(function(){
var tabid = this.className;
if(tabid.indexOf(curtab) > -1){
$(this).siblings().hide();
}
});
$(this).show();
});
});
But nested filters use to filter the content which is not general but having filter either innerfilter1, innerfilter2. I have tried below code but this effects other tabs as well also impact
$('div.inner-tab-box>ul.nav.nav-tabs>li>a').click(function(){
var curtab = $(this).attr('href').substring(1);
$('.tab-content .tab-pane').each(function(){
var tabid = this.id;
if(tabid.indexOf(curtab) > -1){
$(this).siblings().each( function () {
var tx=this.id;
if(tx==='general') {
} else {
$(this).hide();
}
});
$(this).show();
}
});
});
Full Markup
<div class="top-header">
<div class="container-fluid">
<div class="header-top">
<!-- Tabs -->
<div id="tabs">
<!-- tabs start -->
<div class="tab-content">
<!-- part 1 Will execute 2 times as per filters-->
<div role="tabpanel" class="tab-pane active" id="myid1">
<div class="row">
<div class="col-xs-5ths ">
<div class="dark-box-outer">
<div class="top-light-text-box">
<div class="inner-tab-box ">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class=""><a href="#innerfilter1" aria-controls="home" role="tab" data-toggle="tab">></a></li>
<li role="presentation" class=""><a href="#innerfilter2" aria-controls="profile" role="tab" data-toggle="tab"></a></li>
</ul>
[B]<div class="tab-content">
<div role="tabpanel" class="tab-pane myid1 " id="innerfilter1">
<ul>
<li>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myid1 " id="innerfilter2">
<ul>
<li>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myid1 " id="general">
<ul>
<li>
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane myId2 " id="general">
<ul>
<li>
</li>
</ul>
</div>[/B]
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
<!-- Repeated Markup -->
</div>
<div class="col-xs-5ths ">
</div>
</div>
</div>
<!-- end part 1 -->
<div role="tabpanel" class="tab-pane " id="myId2">
<!--Repeated Content For myId2-->
</div>
<!-- end part 1 -->
</div>
<!-- End part 2 -->
</div>
</div>
<!-- ./Tabs -->
</div>
</div>
Can anyone help me to fix this.
Thanks
|
|
|
|
|
I do not understand what your question is. Maybe you can provide a simple summary and ask a clear question.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Hey guys I need some final help with this code. Nothing is showing on the page. Thanks
"use strict";
var gameReport = "<h1>" + itemTitle + "</h1>" +
"<h2>By:" + itemManufacturer + "</h2>" +
"<img src= 'hg_" + itemID + ".png' alt='" + itemID + "' id= 'gameImg' />" +
"<table>" +
"<tr><th>Product ID</th><td>" + itemID + "</td></tr>" +
"<tr><th>List Price</th><td>" + itemPrice + "</td></tr>" +
"<tr>Platform</th><td>" + itemPlatform + "</td></tr>" +
"<tr><th>ESRB Rating</th><td>" + itemESRB + "</td></tr>" +
"<tr><th>Condition</th><td>" + itemCondition + "</td></tr>" +
"<tr><th>Release</th><td>" + itemRelease + "</td></tr>" +
"</table>" ;
itemSummary;
document.getElementByTagName("article")[0].innerHTML = gameReport;
var ratingSum = 0;
var ratingsCount = ratings.length;
for (var i = 0; i < ratings.length; i++) {
ratingSum = ratingsCount + ratingSum;
}
var ratingsAvg = ratingSum / ratingsCount;
var ratingReport = "<h1>Customer Reviews</h1> <h2> " + ratingsAvg + "out of 5 stars (" + ratingsCount + "reviews) </h2>";
for (var i = 0; i <= 2; i++) {
ratingReport += "<div class=review><h1>" + ratingTitles + "</h1><table><tr><th>By</th><td>" + ratingAuthors + "</td></tr><tr><th>Review Date</th><td>" +ratingDate+ "</td></tr>" "<tr><th>Rating</th><td>";
for (var i = 1; i < ratingsAvg.length; i++) {
ratingReport += '<img src="'+ hg_star.png + '"/>';
}
ratingReport += "</td></tr</table>" + ratingSummaries + "</div>";
}
document.getElementByTagName("aside")[0].innerHTML = ratingReport;
Thanks
modified 1-Dec-18 21:22pm.
|
|
|
|
|
This is very easy to fix. Put a breakpoint in the code, then run it, and see what is happening. Then you can fix it.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
hi
I think the problem is your 'for' loop variable names. as you see the first and second 'for' loop variable is "i", change the second one to some thing like "j" an have a try 
|
|
|
|
|
My Question is: - How to Pass two dimensional array in javascript from view to controller in mvc when row is 2 but coloumn is n number(coloumn dynamically can be increase).
|
|
|
|
|
You have several steps you need to do. Where exactly are you stuck?
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
Hey guys,
I need assistance with 2 blocks of code that I am getting error. Here they are:
var gameReport = "<h1>" + itemTitle + "</h1>" +
"<h2>By:" + itemManufacturer + "</h2>" +
"<img src="hg_id.png" alt="id" id=" + gameImg + " />" +
"<table>"
"<tr><th>Product ID</th><td>" + itemID + "</td></tr>" +
"<tr><th>List Price</th><td>" + itemPrice + "</td></tr>" +
"<tr>Platform</th><td>" + itemPlatform + "</td></tr>" +
"<tr><th>ESRB Rating</th><td>" + itemESRB + "</td></tr>" +
"<tr><th>Condition</th><td>" + itemCondition + "</td></tr>" +
"<tr><th>Release</th><td>" + itemRelease + "</td></tr>" +
"</table>" +
itemSummary;
And this:
for (var i = 0; i < 3; i++) {
ratingReport += "<div class="review"><h1>" + ratingTitles + "</h1><table><tr><th>By</th><td>" + ratingAuthors + "</td></tr><tr><th>Review Date</th><td>" +ratingDate+ "</td></tr>""<tr><th>Rating</th><td>";
for (var i = 1; i < ratingsAvg.length; i++) {
ratingReport += "<img src="hg_star.png" />";
}
ratingReport += "</td></tr</table>" + ratingSummaries + "</div>";
}
Thanks for any help 
|
|
|
|
|
The syntax highlighting should have given you a clue - you need to escape quotes inside the string or use single quotes as well as double quotes.
var escaped = "<img src=\"an_image.png\">";
var single_quotes = '<img src="another_image.png">';
You should also check that you have your "+" symbols everywhere you need them - there is one missing after the opening <table> element.
|
|
|
|
|
"<img src="hg_id.png" alt="id" id=" + gameImg + " />" +
IF you are using for loop id need to unique value
|
|
|
|
|
Hallo!
I have a textbox , (made with Zendform), and y load the results of an array in this textbox with the autocomplete();
function , this was performing as expected a few days ago, but today the result is disgusting..the results appear by the textbox this way:
.Galicia
.Asturias
.[...]
this function its asociated with a"keyup" event...please any idea of what could be wrong??, I executed in Chrome, and the compilator, shows no errors...  thanks!! 
so let´s go to the code
$(document).ready(function(){
var comunidades=[
"Galicia",
"Asturias",
"Cantabria",
"Islas Baleares"
];
<pre> $("#comu").keyup(function(){
$(this).autocomplete({
source:comunidades
});
});
</pre>
<pre>
<label>Comunidad</label>
<?php
$fComu=$formNewClienteHotel->get("comunidad");
echo $this->formInput($fComu);
?>
</pre>
This is the class where the Form is declared:
<?php
namespace Alta\Form;
use Zend\Form\Form;
use Zend\Form\Factory;
use Zend\Form\Element;
class FormNewClienteHotel extends Form
{
public function __construct($name=null) {
parent::__construct($name);
$this->setAttributes(array(
'action'=>'',
'method'=>'post'
));
$this->add(array(
'name'=>'comunidad',
'attributes'=>array(
'type'=>'text',
'required'=>'required',
'id'=>'comu',
)
));
|
|
|
|
|
Calling autocomplete on every key press will most likely cause problems. You would normally only call the autocomplete function once:
$(function(){
var comunidades = [
"Galicia",
"Asturias",
"Cantabria",
"Islas Baleares"
];
$("#comu").autocomplete({
source: comunidades
});
});
If that doesn't work, then you'll need to tell us which autocomplete library you're using.
NB: $(document).ready(...) is deprecated:
jQuery offers several ways to attach a function that will run when the DOM is ready. All of the following syntaxes are equivalent:
$( handler )$( document ).ready( handler )$( "document" ).ready( handler )$( "img" ).ready( handler )$().ready( handler )
As of jQuery 3.0, only the first syntax is recommended; the other syntaxes still work but are deprecated.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hallo!!
thanks a lot, for your prompt reply, so, I followed your advices, but it doesn´t work.. 
$(window).on("load",function(e){
var comunidades=[
"Galicia",
"Asturias",
"Cantabria",
"Euskadi"]
$("#comu").autocomplete({
source:comunidades
});
});
"If that doesn't work, then you'll need to tell us which autocomplete library you're using"
?>
Thank u!!! 
|
|
|
|
|
Uppss!!
I forgot to add tue links to the Jquery Library...
?>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
|
|
|
|
|
$(function(){
var comunidades = [
"Galicia",
"Asturias",
"Cantabria",
"Euskadi"
];
$("#comu").autocomplete({
source: comunidades
});
});
Assuming you have an <input> with id="comu" somewhere in your document, and you've linked to the jQuery UI CSS[^] as well as the scripts, that should work. It's virtually identical to the first example on the jQuery UI site[^].
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi!!
thanks a lot for the answer...
I had to go use a safe copy of the Projekt..becouse I finally didn`t find a solution 
Greetings!!
|
|
|
|
|
Ive just started to learn JS and Ive been stuck on a memory game script Ive been messing with. Ive finally got it able to accept images, instead of text, but when it matches any 2 the cards just turn back over :/ Also when I hit the image card, the whole game freezes. Help please?
Here is code below.
<pre><!DOCTYPE html>
<html>
<head>
<style>
div#memory_board{
background: url(klematis.jpg) -repeat;
border:#FF1493 5px solid;
width:700px;
height:500px;
padding:24px;
margin:0px auto;
}
div#memory_board > div{
background: url(klematis.jpg) no-repeat;
border:#FF1493 1px solid;
width:71px;
height:71px;
float:left;
margin:10px;
padding:20px;
font-size:64px;
cursor:pointer;
text-align:center;
}
div#memory_board > div img {
height: 100%;
}
.picture{
background-size: cover !important
}
</style>
<script>
// Scripted By Adam Khoury in connection with the following video tutorial:
// http://www.youtube.com/watch?v=c_ohDPWmsM0
var memory_array = ['url("http://cs61a.org/assets/images/john-denero.jpg")','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
var memory_values = [];
var memory_tile_ids = [];
var tiles_flipped = 0;
Array.prototype.memory_tile_shuffle = function(){
var i = this.length, j, temp;
while(--i > 0){
j = Math.floor(Math.random() * (i+1));
temp = this[j];
this[j] = this[i];
this[i] = temp;
}
}
function newBoard(){
tiles_flipped = 0;
var output = '';
memory_array.memory_tile_shuffle();
for(var i = 0; i < memory_array.length; i++){
output += '<div id="tile_'+i+'" class="picture" onclick="memoryFlipTile(this,\ ' + i + ')"></div>';
}
document.getElementById('memory_board').innerHTML = output;
}
function memoryFlipTile(tile,val){
if(tile.innerHTML == "" && memory_values.length < 2){
index = memory_array[val]
if (memory_array[val].length > 20){
tile.style.backgroundImage = memory_array[val];
}
else {
tile.style.background = '#FFF';
if (index == "image"){
tile.innerHTML = "<div style='font-size: 20px'>" +index +"</div>"
}
else
{
tile.innerHTML = index;
}
}
if(memory_values.length == 0){
memory_values.push(index);
memory_tile_ids.push(tile.id);
}
else if(memory_values.length == 1){
memory_values.push(index);
memory_tile_ids.push(tile.id);
if((memory_values[0].length > 20) && (memory_values[1].length < 20) && (memory_values[0] == gsi_dict[memory_values[1]])){
console.log("go")
tiles_flipped += 2;
// Clear both arrays
phrase = "You found "+ memory_values[1] +"!"
alert(phrase)
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length){
alert("Great job naming those awesome GSI's. Get ready to play again!");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
}
else if((memory_values[1].length > 20) && (memory_values[0].length < 20) && (memory_values[1] == gsi_dict[memory_values[0]])){
console.log("go")
tiles_flipped += 2;
phrase = "You found "+memory_values[0] + "!"
alert(phrase)
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
if(tiles_flipped == memory_array.length){
alert("Great job naming the CS61A staff. Get ready to play again!");
document.getElementById('memory_board').innerHTML = "";
newBoard();
}
}
else {
console.log("flip")
function flip2Back(){
// Flip the 2 tiles back over
var tile_1 = document.getElementById(memory_tile_ids[0]);
var tile_2 = document.getElementById(memory_tile_ids[1]);
tile_1.style.background = "url(klematis.jpg)";
tile_1.innerHTML = "";
tile_2.style.background = "url(klematis.jpg)";
tile_2.innerHTML = "";
// Clear both arrays
memory_values = [];
memory_tile_ids = [];
}
setTimeout(flip2Back, 700);
}
}
}
}
</script>
</head>
<body>
<div id="memory_board"></div>
<script>newBoard();</script>
</body>
</html></pre>
|
|
|
|
|
Hey guys,
I need some hep finishing my javascript assignment. This is what I have so far:
randomlnt(Math.random(0-9));
var quoteElem = document.getElementByTagName("quote")[0];
var randomQ = randomlnt;
function randomlnt(lowest, size) {
lowest = Math.floor(size);
size = Math.random(0-9);
}
getQuote(randomQ); {
document.getElementByTagName("quoteElem").innerHTML = quoteElem;
}
The instructions are a total of 4 steps, some of which I have completed but I am not sure if they are correct or placed in the right area.
Here are the steps:
5. Directly below the comment section, insert a function named randomint that will be used to generate a random integer. Specify two parameters for the function named lowest and size. The lowest parameter will specify the lowest possible value for the random integer and the size parameter will set the number of integers to be generated. Use those two parameter values and the Math.floor() and Math.random() methods to return a random integer within the specified range.
6. Above the randomInt() function insert a command to call the function, generating a random integer from 0 to 9. (Hint: Remember that the size of this interval is 10 because it includes 0 in its range.) Store the result from the function in the randomQ variable.
7. Create a variable named quoteelem that references the first element in the document that has the quote tag name.
8. Call the getQuote() function using the randomQ variable as the parameter value to generate a random Jane Aust
|
|
|
|
|
ghazabaz wrote: insert a function named randomint
ghazabaz wrote: function randomlnt(
You might want to start by using the name you were told to use. There's a difference between a lower-case I and a lower-case L. 
ghazabaz wrote: Use those two parameter values and the Math.floor() and Math.random() methods to return a random integer within the specified range.
Your function doesn't return anything. And it completely ignores the size parameter.
ghazabaz wrote: Math.random(0-9)
That passes a single argument of -9 to the Math.random function. But that function doesn't take any parameters, so it's ignored.
Math.random() - JavaScript | MDN[^]
ghazabaz wrote: randomlnt(Math.random(0-9));
Your function expects two parameters. You are only passing one parameter. You are also throwing away the value that your function isn't returning yet.
ghazabaz wrote: var randomQ = randomlnt;
That stores the function in the variable randomQ. Your instructions were to store the return value in that variable.
ghazabaz wrote: getQuote(randomQ); {
document.getElementByTagName("quoteElem").innerHTML = quoteElem;
}
That throws away the return value of the getQuote function. It then tries to set the innerHTML of every <quote> element in the document to the first quote element, which isn't going to work.
You need something more like:
quoteElem.innerHTML = getQuote(randomQ);
NB: The MDN documentation for Math.random includes an example that's almost what you need for #5 - generating a random integer between 0 and max - 1. You should be able to adapt that to your requirement with a little basic arithmetic.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard, thank you very much for the reply.
The text does not mention anything about returns, that is why I wrote it as it is 
So for the return value, do I insert inside the calling of the randomInt(); function or within its definition?
randomInt(); {
randomQ;
}
OR
function randomInt(lowest, size) {
size = Math.random(0-9)
lowest = Math.floor(size);
return randomQ;
}
Here is what I have so far:
randomInt(); {
return randomQ;
}
var quoteElem = document.getElementByTagName("quote")[0];
var randomQ;
function randomInt(lowest, size) {
size = Math.floor(Math.random() * 10);
lowest = ???;
}
document.getElementById("quoteElem").innerHTML = getQuote(randomQ);
I am trying to figure out the lowest parameter of the randomInt function now. How will I set it up according to the instructions: "to specify the lowest possible value for the random integer" ???
**EDIT**
How about if I use the Math.min() function for the lowest parameter?
function randomInt(lowest, size) {
size = Math.floor(Math.random() * 10);
lowest = Math.floor(Math.min(size));
}
modified 9-Nov-18 12:15pm.
|
|
|
|
|
ghazabaz wrote: Use those two parameter values and the Math.floor() and Math.random() methods to return a random integer within the specified range.
ghazabaz wrote:
function randomInt(lowest, size) {
size = Math.floor(Math.random() * 10);
lowest = Math.floor(Math.min(size));
}
Again, that function isn't returning anything. And you're ignoring the parameters - you immediately overwrite size with a random value, and then overwrite lowest with the value of size.
Look at the demo on the MDN site[^] again:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
Breaking that down a bit:
function getRandomInt(max) {
var number = Math.random();
var maxInt = Math.floor(max);
var numberInRange = number * maxInt;
var result = Math.floor(numberInRange);
return result;
}
That's almost exactly what you're trying to do. The difference is, you need to translate the random number to a range that's greater than or equal to Math.floor(lowest), and less than (Math.floor(lowest) + Math.floor(size)). You can use some fairly simple arithmetic to do that.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
plz drop the link as the response to guide me to learn javasript,,....that you know..
|
|
|
|
|
|
You didn't include any links ... nor have you attributed the source of these words
How to learn JavaScript in three months - Quora[^]
There is a zero-tolerance to plagiarism on this site so please ensure that you properly attribute the source of any information you post.
|
|
|
|
|
How many ways can you output loop information to the browser?
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
