If I have a page that inserts an unwanted div on every load, is there any way to hide it without using CSS? I don't have access to that div and it doesn't have an ID or a CLASS.
For example I don't want the browser to display the following div:
<div style="text-align: center; font-size: 14px; text-decoration: none;">Please click <a style="text-decoration: none !important;" target="_blank" href="http://www.website.com"><b>here</b></a></div>
I found a question and an answer for hiding a specific string of text, but it doesn't work with this.
You can try to select content inside the div by using attribute value. Href attribute inside your div is perfect to do this, and then just use jQuery .parent() method to select whole div.
$("a[href='http://www.website.com']").parent().css("display","none")
Here is the working example:
http://jsfiddle.net/waxtue0o/
There are some ways of identifying an element without it having an id or class. If you have jquery you can use more advanced selectors like mgibala said (although I would prefer to do it without scripting).
See http://www.w3schools.com/cssref/css_selectors.asp for information on selectors. Two examples below.
Fiddle: http://jsfiddle.net/o8oyd3e2/
HTML:
<body>
<div style="background-color='red';">
Spam spam spam
</div>
<div>
Some content
</div>
<div class="myContent">
Some content
</div>
<div style="background-color='red';">
Spam spam spam
</div>
</body>
CSS:
body div:first-child {
display:none;
}
body div.myContent + div {
display:none;
}
Or you can host your site somewhere else...
You can do
document.getElementsByTagName("div")[0].style.display = 'none';
Related
I'm trying to link the button to the heading of the different sections on the same page but I couldn't figure out how to use.i can use a link from one class to another but how to link on the same class with a specific word. what I have done is
<Button className="sec-btn"> Get Started </Button>
I want when users click Get started button then link that to the "Antsy service" title on the same page.
<h1 className="heading-1">Antsy services</h1>
What I understand from this question is you have a href anchor tag element that when clicked, you want to scroll down the page to a different element.
You can use IDs as a form of linking between elements on the same page.
Solution
Simply give the element you want to scroll to an ID and then in the anchor tag you can provide a link to it via href.
<a href="#test">
<button> click me </button>
</a>
<div class="space"></div>
<div id="test">
<p> hello </p>
</div>
Here is a codepen for it so it's easier to see the effect visibly.
https://codepen.io/shanecreedon/pen/poJGovK
What you are looking for is anchor links.
How to create and use them:
add id="example" to some element on the page
add Scroll me to example element on top of your page
click and see what will happen
You need to use the id selector syntax like this. Heading should have an id selector...
<h1 id="heading-1">Antsy services</h1>
Then you can link to the section of the page like this:
Get Started
I see you're trying to build a Single Page Site with sections. For this, you have to use ID to all the Headers that you are about to navigate to.
Try this,
<html>
<head>
<title>Example</title>
<style>
h1{
height : 100vh;
background: skyblue;
}
h2{
height: 100vh;
background: #c0c0c0;
}
h3{
height: 100vh;
background: #a0faf9;
}
</style>
</head>
<body>
Home
Services
Contact
<h1 id="home">Home Section</h1>
<h2 id="services">Services Section</h1>
<h3 id="contact">Contact Section</h1>
</body>
</html>
I am trying to apply a hide effect on all ID's with the same label, but it only works on the first one. I am having the same problem when I tried to add slideToggle too, but figured solving this will solve the others.
JQUERY
var allPanels = $('#accordionSlide');
allPanels.hide();
CSS
#accordion {
display: block;
width: 100%;
overflow: hidden;
}
#accordionBtn { display: block; }
#accordionSlide { display: block;}
HTML
<div id="accordion">
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
<div id="accordionBtn">
Solutions
</div>
<div id="accordionSlide">
Wireless Remote Monitoring
</div>
</div>
Use class attribute as id should be unique for every element. id represents only one element that's why it should be unique. So when you apply selector it only selects the first element that it founds on the page.
do like this:
<div class="accordionSlide">
Wireless Remote Monitoring
</div>
and jquery:
var allPanels = $('.accordionSlide');
allPanels.hide();
jQuery matches exactly one element when querying for an ID. An array of at most one Element object will be returned by $("#foo").get(). See the jQuery documentation for more information.
ID Selector (“#id”)-->Selects a single element with the given id attribute.
if you want to apply to all elements then use class in place of id
var allPanels = $('.accordionSlide');
allPanels.hide();
html
<div class="accordionSlide"></div>
i've heard using multiple id attributes is very bad practice but what confuses me is what if the elements are nested like this...
<div id="slideshow1" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
<div id="slideshow2" class="slideshow">
<div id="left" class="slideshow-arrow"></div>
<div id="right" class="slideshow-arrow"></div>
</div>
i've made an example with js here and everything seems to work fine..
http://jsfiddle.net/6YPsX/
if they were nested within the same element then unique id's would make sense but do ID's really need to be unique to the whole document?
An ID is more than just a way of finding an element, there are other things associated with an ID. The following link should be helpful and provide a greater insight into this. Here are the main points:
The id attribute has several roles in HTML:
As a style sheet selector. As a target anchor for hypertext links.
As a means to reference a particular element from a script.
As the name of a declared OBJECT element.
For general purpose processing by user
agents (e.g. for identifying fields when extracting data from HTML
pages into a database, translating HTML documents into other formats,
etc.).
link to w3 site
You can have multiple classes on the same element
<div id="slideshow1" class="slideshow">
<div class="slideshow-arrow left"></div>
<div class="slideshow-arrow right"></div>
</div>
CSS
.slideshow-arrow {
background: none top left no-repeat;
width: 20px;
height: 20px;
}
.slideshow-arrow.left {
background-image: url('...');
}
.slideshow-arrow.right {
background-image: url('...');
}
It is a bad practice it won't pass W3C validation and it get's even worse when you try to implement JavaScript. Just use a class name instead or give them different id names.
I am new to CSS and Javascript. I want to create a specific area (I use the div tag) in the page where once a link is clicked within, the area will expand and an additional content would be displayed. I managed to create a code which does the job only partially: the new content is displayed after the click but this content is not displayed within the area border. In few words the area is not expanded, only a new content is displayed...any suggestion?
I really like this jQuery accordion method:
Live Demo: http://jsfiddle.net/kbZDv/1/
It's easy to use, style and looks good.
All you need to do is include the latest version of jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
Here is the HTML markup:
<p class="trigger">Click here to expand and reveal more information</p>
<div class="toggle_container">
<div class="block">
<p>Content goes here.</p>
</div>
</div>
The basic (yet to be styled) CSS:
p.trigger{
margin-bottom:7px;
margin-top:-5px;
}
.toggle_container{
margin-bottom:10px;
}
.toggle_container p{
margin:0px;
}
.toggle_container{
background:#f0f0f0;
clear: both;
font-size:100%;
}
And the all important jQuery to make it work:
$(".toggle_container").hide();
$("p.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("normal");
});
You could use a jquery plugin like div expand?
http://plugins.jquery.com/plugin-tags/div-expand
or perhaps a jquery exander plugin
http://plugins.learningjquery.com/expander/demo/index.html
I'm trying to get the following effect in the jQuery Mobile framework:
|-------------------------------------------------|
|[button1] HeaderText/Image [b1] [b2] [b3] |
|-------------------------------------------------|
Where [b1], [b2] and [b3] are small image buttons in the Header.
Is this even possible currently?
just simple like this
<div class="ui-btn-right">
</div>
I have had troubles with this in the past. Trick is, force all of your links to be data-role="button" and wrap said links in a container with class="ui-btn-[left/right]" (respectively) This takes care of the traditional header button positioning and markup.
<div data-role="header">
<div class="ui-btn-left">
Button1
</div>
<h1>HeaderText/Image</h1>
<div class="ui-btn-right">
B1
B2
B3
</div>
</div>
Seems as if it is possible, check out this link:
Grouped buttons on the jQuerymobile Framework website.
This is how i did it. Some of the styling may not be necessary as the class used on the parent div should be enough.
<div data-type="horizontal" style="top:10px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right">
Team Call
Logout
</div>
In order to use your own image buttons on the right side you'll need to either float or position a div to the right, then add your buttons.
Then you'll need to override the jQuery mobile styles for those specific buttons to prevent them from getting the rounded, gradient button style that's automatically added by the library.
#header {
float: right;
}
#header .ui-btn-up-b,
#header .ui-btn-hover-b,
#header .ui-btn-down-b
#header .ui-btn-active {
border: 0px;
background: none;
}