We Keep Coding

find and mark word in html string [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 days ago.
Improve this question
I need to search for a word in html text. But html tags should not be searched. For example, I am looking for the word a in the text below, and the <a> tag should not be mistakenly searched for.
<div class="card-body">
<h5 class="card-title text-primary">ramin </h5>
<p class="card-text"></p>
<p dir="RTL" style="text-align:justify">this is a book</p>
<p dir="RTL" style="text-align:justify">
<strong>یادآوری</strong>-
<a class="btnbandmodal" href="" data-bs-toggle="modal" data-bs-target="#bandmodal" data-bandid="پیوست الف" data-baznegari="1390"> aaaa</a>
this is a book.
</p>
<p></p>
<hr class="bg-danger border-2 border-top border-warning">
</div>

Javascript: How to randomize images on page load [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I'm creating a one page website right now and I want to add an randomize image every time that the page was load. Before I'm using PHP to randomized my carousel by using ORDER BY rand() while selecting data. Right now I am looking for a javascript code to randomized images NOT USING ANY DATABASE. I accept any suggestion, my code are the following below:
<!-- start home -->
<section id="home">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1 class="wow fadeIn" data-wow-offset="50" data-wow-delay="0.9s">We make paper products that are <span>awesome</span></h1>
<div class="element">
<div class="sub-element">Hello, this is WhatWeAre</div>
<div class="sub-element">Paper for everyone</div>
<div class="sub-element">Contact us and we make your products while conserving environment </div>
</div>
<a data-scroll href="#about" class="btn btn-default wow fadeInUp" data-wow-offset="50" data-wow-delay="0.6s">GET STARTED</a>
</div>
</div>
</div>
</section>
<!-- end home -->
<style type="text/css">
#home{
background: url('../images/home_1.jpg') no-repeat;
background-size: cover;
padding-top: 160px;
padding-bottom: 100px;
min-height: 650px;
}
</style>

Okay, I got an answer with some sites. Not making any changes with my CSS stylesheet and NOT even using database. Here the following codes:
<script type="text/javascript">
if (document.getElementById) {
window.onload = swap
};
function swap() {
var numimages=7;
rndimg = new Array("images/home.jpeg","images/home-bg.jpg","images/home_1.jpg");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("home").style.backgroundImage = "url("+ randomimage +")";
}
</script>

How to show a div when a link is clicked [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
So i have this html code here for my main menu:
<div id="main-container">
<div id="main-wrapper">
<div id="logo">
<h1 id="title">portfolio</h1>
<h2 id="ready">ready</h2>
</div>
<div id="selection">
<ul>
<li>about</li>
<li>resume</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
So what I want to do is add some animation to my website. For instance, when i click on the link "about" I want a div to show up, which is this one:
<div id="secondary-container">
<div id="about-wrapper">
<div id="header">
<h1 id="about-heading">about</h1>
</div>
<div id="information">
<h2 id="introduction">introduction:</h2>
<p id="paragraph">hello! welcome to my website!</p>
</div>
<div id="content">
<h2 id="my-information">my information:</h2>
<ul>
<li>name: <span>danny moon</span></li>
<li>age: <span>21</span></li>
<li>sex: <span>male</span></li>
<li>location: <span>new jersey</span></li>
</ul>
</div>
<div id="feature">
<h2 id="my-skills">my skills: </h2>
<ul>
<li>html: <span>50%</span></li>
<li>css: <span>50%</span></li>
<li>javascript: <span>30%</span></li>
<li>python: <span>60%</span></li>
</ul>
</div>
</div>
</div>
My jquery code right now is very simple
$(document).ready(function(){
$('#about').click(function(){
$('#secondary-container').show();
});
});
However, when i press the "about" link, nothing happens. Any suggestions? If you guys need my full html/css/jquery/js folders
Here is a link using dropbox:
https://www.dropbox.com/sh/c8abu7mptjz2dkk/AABZWS-dPY7csAxIRgewP6H2a?dl=0
Thank you.

Im not sure if you already found this, but in the files that you linked you have some minor syntax errors.
You are missing the closing brackets '>' at the end of the script tags. It should look like this:
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui.js"></script>
<script type="text/javascript" src="../js/showhide.js"></script>

Since you have the dummy href="#", when you click your link, it is probably still acting like a link - adding the "#" anchor to your URL. You should prevent the default action of a link using event.preventDefault():
$(document).ready(function(){
$('#about').click(function(event){
event.preventDefault();
$('#secondary-container').show();
});
});
Note the event param passed to your click event function.

Best way to store data for website with dialog box [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm learning all the webdev, now for gaming community purpose I'm making a website which is similar to periodic table. It cointains for now about 25 "elements" but only blocks displayed without any info.
I want to make it open a dialog box (can't find any other name for it), similar to wowhead's table which contains item's info but I wan't it open on click, not on hover, and want it to act like lightbox, open on middle of screen with background grayed out.
Number of elements will rise to about 80, and here is my question:
Should I make for every such an element html file, which will be dispalyed in dialog, or use data base for it?

I think Bootstrap is probably to simplest solution for the layout and the Modal (the popup box).
You really only need one modal.
You can give each of your "blocks" a data attribute and store an item id there.
Then, when a user clicks a block, get the id from the attribute
use the id to get the information for the item from your database (myriad of ways to do that)
then populate that info into the modal.
Here's a contrived example (without the getting info from database part which could vary greatly depending on how you want to do that.)
$('.container').on('click', '.block',function(){
var id=$(this).data('id');
$('#blockId').html(id);
$('#myModal').modal({show:true});
});
/* CSS used here will be applied after bootstrap.css */
.block{
background-color:#ccc;
height:100px;
width:100px;
cursor:pointer;
}
#blockId{
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-2"><div class="block" data-id="123"></div></div>
<div class="col-xs-2"><div class="block" data-id="456"></div></div>
<div class="col-xs-2"><div class="block" data-id="789"></div></div>
<div class="col-xs-2"><div class="block" data-id="234"></div></div>
<div class="col-xs-2"><div class="block" data-id="567"></div></div>
<div class="col-xs-2"><div class="block" data-id="678"></div></div>
</div>
</div>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>The id of the block you clicked was <span id="blockId"></span> use that to get stuff from your database</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

.index() only for one instance of class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I've got a problem with .index() function in jQuery.
Outline of DOM:
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
<div class="one">
<div class="two">
<div class="three"></div>
<div class="three"></div>
<div class="three"></div>
</div>
<div class="threeB"></div>
<div class="threeB"></div>
<div class="threeB"></div>
</div>
According to which of threes in two a user clicks, one of the threeBs are displayed. I wanted to do this with .index() function, but it fails for all but the first ones. In the second one class, the two threes have indexes 3 and 4 (instead of desired 0 and 1). On the other hand, .eq() for threeBs seems to work as desired.
Any neat way to solve this without having to count how many threes were there before the div in question?

It is working like this:
$('.three').click(function(){
$(this).parent().parent().find('.threeB').eq($(this).index())
.css('background','green');
});
Check here: jsFiddle