How to Hide/Disable Content in HTML [closed] - php

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
This is my site mycareerpath.co.in. In that How can I delete "FREE DOMAIN + 1GB HOSTING" from my site
Note
please right click and see the view source.

By far simplest and will work in all browsers, use HTML comments:
<!--
<font style="TOP: 0%; LEFT: 0%; VISIBILITY: visible; POSITION: absolute;background-color:#ffffff; z-index:111">
<a style="font-family:arial;font-size:12px;text-decoration: none; color: #0000FF;" href="http://hosting.India.to"> Domain Name +
1GB Linux India Web Hosting in Rs.349 </a><font size="4"> </font><br>
</font>
-->

Use hide() function in jquery
Example:-
<a href='test.html' id='link'>hello</a>
$('#link').hide();

add id to you anchor and use id selector..
$('#anchorId').hide(); //to hide
$('#anchorId').click(function(e){
e.preventDefault();
}); //to disable the link.
or with CSS
#anchorId{
display:none;
}; //to hide

If you cannot comment your code, you can add a onpageload attr to body and call a javascript function to not display the anchor tag.
<script type="text/javascript">
function Hide() {
document.getElementById('Id_of_anchor_tag').style.display = "none";
}
</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".messages").fadeOut('slow');
});
</script>
<font style="TOP: 0%; LEFT: 0%; VISIBILITY: visible; POSITION: absolute;background-color:#ffffff; z-index:111">
<div class="messages">
<a style="font-family:arial;font-size:12px;text-decoration: none; color: #0000FF;" href="#">welcome</a><font size="4"> </font><br>
</font></div>
This will not only remove link but will display an message WELCOME which will fade and disappear automatically .

Use following code to hide the anchor. Note, this will only hide the anchor inside the font tag and nothing else.
$(document).ready( function() {
$("font a").hide();
});
EDIT:
To hide very specific anchor inside font tag, which contain certain URL, use following code -
$(document).ready( function() {
$("font a").each(function() {
if($(this).attr("href") == "http://hosting.India.to") {
$(this).hide();
}
});
});

Related

Make jQuery work with all numbered varients of ID [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 4 years ago.
Improve this question
I'm coding something in-which certain text appears depending on which li you click. The jQuery I have written works, but doesn't take into account that all this data is being outputted by a PHP loop. Is there a way where I can change the jQuery I've written can work for an infinite number of li's rather than only the ones I've specified?
$('#selection1').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message1').addClass('active');
$('#selection1').addClass('active');
});
$('#selection2').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message2').addClass('active');
$('#selection2').addClass('active');
});
$('#selection3').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message3').addClass('active');
$('#selection3').addClass('active');
});
Remember that in jQuery you use selectors from css, so the easiest way to do it would be to cahnge this
$('#selection1').on('click', function() {
to this
$('[id^="selection"]').on('click', function() {
Which will apply to all elements that has an id that starts with "selection".
Also inside the click event use variable this instead of refering again to id.
$('[id^="selection"]').on('click', function() {
var selection = $(this),
number = selection.attr("id").substr(9);
$('.content-block, .content-selector').removeClass('active');
$('#message' + number).addClass('active');
selection.addClass('active');
});
If you make the buttons, you can add a data-atribute (1,2 or 3), and then add a class to the clicked button like this:
$('.buttonClicked').on('click', function() {
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
var num = $(this).attr('data-atribute'); //Get the 1,2 or 3 number dynamically
$('#message'+num).addClass('active');
$('#selection'+num).addClass('active');
});
Use the function like this
$('li').on('click', function() {
var num = $(this).attr("id").substr(6);
console.log(num)
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message'+ num).addClass('active');
$('#selection'+ num).addClass('active');
});
$('li').on('click', function() {
var num = $(this).attr("id").substr(6);
console.log(num)
$('.content-block').removeClass('active');
$('.content-selector').removeClass('active');
$('#message'+ num).addClass('active');
$('#selection'+ num).addClass('active');
});
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<ul>
<li id="select1">
1
</li>
<li id="select2">
2
</li>
<li id="select3">
3
</li>
<li id="select4">
4
</li>
</ul>
If you really don't want to change your HTML, you can use jQuery ^= selector to select every element with an id starting with "selection".
$(document).on('click', '[id^="selection"]', function() {
let id = +this.id.replace('selection',''); //Get the ID value here
$('.content-block,.content-selector').removeClass('active');
$('#message'+id).addClass('active');
$(this).addClass('active');
});
div{
width: 20px;
height: 20px;
background-color: blue;
display: inline-block;
margin: 5px;
}
div.active{
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="selection1"></div>
<div id="selection2"></div>
<div id="selection3"></div>
<div id="selection4"></div>
<div id="selection5"></div>
<div id="message1"></div>
<div id="message2"></div>
<div id="message3"></div>
<div id="message4"></div>
<div id="message5"></div>

Can't bind event to dynamically created element

I have following html structure in editstaff.php:
<div id="result" style="display:none">This is result div</div>
<form id="adres" onsubmit="return submitForm();">
<input type="hidden" name="type" value="adrs" />
<input type="submit" value="Address" /></form>
And in inline-style:
#result{
position: absolute;
border: 5px solid gray;
padding: 10px;
background: white;
width: 270px;
height: 190px;
}
What this html page do, clicking on "Address" button of "adres" form, some post data is send to another php page which shows information based on sent data on a pop-up like div (which style was display:none) fadeIn from display:none. The javascript/jquery codes for this purpose are as follows:
<script>
function submitForm(){
var data=$("#adres").serializeArray();
/* alert(data); */
data.push(
{
name:'sname',value:$("#title").val()
}
);
$.post("geteditdata.php",data,
function(data){
$("#result").html(data);
positionPopup();
$("#result").fadeIn(1000);
}
)
return false;
}
function positionPopup(){
$("#result").css({
left: ($(window).width() - $('#result').width()) / 2,
top: ($(window).width() - $('#result').width()) / 2,
position:'absolute'
});
}
$("#divclose").live('click',function(){
$("#result").fadeOut(500);
});
</script>
i.e the div in editstaff.php with fetched data will pop-up like following structure:
<div id="result">
some_value
Close
</div>
All things is going on okay upto this stage. But when I am clicking on "Close" link on pop-up div the div is not closing(fadeOut) with $("#divclose").click(function()
Why this is not happening in this case?
can anybody give a solution for me?
I am giving a demo page where you can see the problem in practical.
Please visit http://raddacentre.org/editstaff.php and
write 'Afsar' in "Search by name" field and
then press "show".
After page loads, please press "Address" button which will be at the bottom of the page.
Then a pop-up div will be shown where there will be a link named "Close".
Press that button and please check why this div is not fade in there?
As I used jquery version 1.3, I used $("#divclose").live method instead of $(selector).on method.
Any help will be appreciated.
in geteditdata.php there is only this code:
<?php
echo $_POST['sname'];
?>
<br /><br />Close Here
You are using really old jQuery 1.2.3 (it's not jq 1.3), I'm not sure if .live exist in that version. So two things:
Use new jQuery (I suggest 1.9)
Use .on instead of .live (read about it, syntax is a little bit different)
Code should look like that:
$("body").on('click', "#divclose", function(){
$("#result").fadeOut(500);
});
Instead of "body" you can use other container that exist when event is being binded.

How to keep my text on the same line with AJAX call?

I'm trying to keep my ajax call on the same line, as detailed here: http://external.sidewaykill.com/versound/motd.php.
It won't, so what can I do?
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://static.sidewaykill.com/img/ajax-loader2.gif' alt='loading...' />";
// load() functions
var loadUrl = "playercount.php?id=2";
$("#servercount").html(ajax_load).load(loadUrl);
});
This has nothing to do with PHP but everything to do with the absolutely awful markup of your HTML and the lack of CSS. You're going to want to wrap all of this "free-text" inside of a div or two, and then make sure you're putting the wrapper div inside of the infobar div
Sample CSS:
#infobar p{
float: left;
margin-left: 5px;
}
HTML:
<div id="infobar">
<div style="float: left;">
<p>Welcome! Our server count is:</p>
<p>1 / 10</p>
<p>We hope you enjoy your stay! We are currently playing on gm_construct.</p>
</div>
</div>
its because the ajax call returning a div element,
as this :
<div id="count"> 0 / 10</div>
Since div is a block element it will always render in a new line. there are two solutions for this
one would be to return a <span> element instead of the div
second will be if u are unable to change the return value you can fix it via css
#servercount #count { display : inline }
My suggestion is to go with the first solutions

How to change the backgroundPosition of a div with a onClick event from another element

How do I put this together? I'm working on this website that requires that every time that a item from the menu is clicked the background-position of two specific DIVs change and keep the selection.
Here is my attempt:
First I create a variable "p" to save on the url/address the selected page, so for example, if you are in about us you will probably see something like this on the address bar:
website.com/index.php?p=aboutus
On the menu, on the button about us I did this with a call to the function changeBG onClick:
About Us
I figured I need javascript to do the trick and here is where I'm stock.
This is the script that goes in the header:
<script type="text/javascript">
<?
// Set "p" value to HOME if previously empty.
if ($_GET['p']=='') $_GET['p']='home';
?>
function changeBg(pvalue) {
if (pvalue == '') {pvalue = '<?=$_GET['p'];?>';
}
if (pvalue=='aboutus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 20px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 80px;
if (pvalue=='contactus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 10px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 100px;
}
}
</script>
This is what goes on the body:
<div id="left_menu">
About Us
Contact Us
</div>
<div id="this_is_the_first_to_be_changed">
</div>
<div id="this_is_the_other_to_be_changed">
</div>
Can anyone spot why this doesn't work?
Try it using quotes:
style.backgroundPosition="0 20px";
UPDATED
Also, what about this line:
pvalue = '';
you are setting pvalue='=aboutus'
UPDATED
The script element is incorrect:
<script type="java/text">
right is:
<script type="text/javascript">
In addition use firebug or chrome to see the JS generated in the page.

Dynamic Sliding Panel Using JQuery, based on values from a mySQL database

I am in the process of developing an academic toolkit for my university. The problem statement is, the user will be given a list of courses. When one clicks on that particular name of the course, he should get a dynamic slide panel showing the course objective and other details of that course. All these values will be present in a mySQL database. The slide panel is a must requirement here. So please help me how to get the data dynamically in the slide panel from the mySQL database. Thanks in advance... :)
http://api.jquery.com/jQuery.ajax/'>jQuery's $.ajax is your friend!
Something like the following should work (it is untested and not optimized). Hopefully it will lead you in the right direction. You should also add a loading message, error handling, and data caching.
<style>
.course{
border:solid 1px #000;
margin-bottom:10px;
}
.title{
display:block;
border-bottom:solid 1px #000;
background:#eee;
font-weight:bold;
}
.details{
display:none;
}
</style>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
<div class='details'></div>
</div>
<script>
$(function(){
$(".course").each(function(){
var self = $(this);
$(".title",self).click(function(){
$.ajax({
"url":this.href,
"success":function(data){
// extract the content you need from the HTML page.
var content= $(data).find("#content").html()
// insert into the details div and then show it.
self.find(".details").html(content).slideDown(1000);
}
});
// prevent default action...
return false;
});
});
});
</script>
Also note that there are some abstractions of $.ajax to make calls like this easier (such as $("#myElement").load(url), $.post and $.get). You can find more information about these methods at http://api.jquery.com/category/ajax/

Categories