I want the html to open when the password is right and I have tried .js, document.write, .html, href, div, document.getElementById and nothing is working when it's inside the if condition but I need it in there so it opens when the condition is right.
<script>
function 123()
{
var pass=document.getElementById("pass").value;
if(pass=="password")
{
alert("Logged In");
here is where the HTML code should go;
}
}
</script>
You can create the html element in this page and give this element display none and when the password is correct change display example:
if(pass=="password") {
alert("Logged In");
document.getElementById("page").style.display="block";}
Related
There's an img element being created somehow on this page that I can't figure out how to target. It's generated by a script I don't have access to so I can't just delete it.
There are no ID or class attributed to it so I can't apply CSS (that I know of). The source link also changes for other article pages so I can't reference the URL either.
Is there anyway I can target or just hide it? It's creating extra white space at the bottom of the page.
http://support.spacejump.co.nz/support/solutions/articles/27000068245-payment-methods
There are two ways depending upon the possibilities on your website.
1: I suppose there will be no img tag directly inside the body tag if you code properly and put it inside a div or any other tag. So, for this solution is:
body > img {display: none;}
2: If first is not the case and the image will always come after the script tag. Then this also is the solution:
body > script + img {display: none;}
BTW, both are working in your situation.
Right click on the page and view source. You can see the element present int the page source. Delete it in the source code in line 551.
If the image src attribute is guaranteed to be consistent over time, then you can target it by that attribute, and remove it.
document
.querySelector('img[src="/support/solutions/articles/27000068245-payment-methods/hit"]')
.remove()
Here is a JS solution to target the last class in the page before all those JS src CDNs... As it seems the IMG tag is after a bunch of JS tags with the very last element in your page being the layout class, so we create a helper function that gets the siblings of the target element, then we loop over the array returned by the function and set an index, then check the tag.tagName === 'IMG' and check our iterated index => i is higher than the set index, if we get a match, remove that element from the DOM.
const removeImg = document.querySelector('.layout')
const body = document.body
function getAllSiblings(element, parent) {
const children = [...parent.children];
return children.filter(child => child !== element);
}
function removeImageAfterElement(el) {
let index = 0;
getAllSiblings(removeImg, body).forEach((tag, i) => {
tag.classList.contains(el) ? index = i : null
tag.tagName === "IMG" && i > index ? tag.remove() : null
})
}
removeImageAfterElement(removeImg)
<body>
<div class="another-class"></div>
<div class="layout layout--anonymous">
some text and page content
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/package#version/file"></script>
<script src="https://unpkg.com/#freshworks/freshdesk/dist/freshdesk.js"></script>
<script></script>
<script type="text/javascript"></script>
<img src="/support/solutions/articles/27.............../hit">
</body>
I have a Html page which has anchor tag, I Need to remove certain style applied already in html page for anchor tag while the html page is opened throw Iframe.
HTML Content as below:
<html>
<body>
<div>some content<a href="http://www.website.com" name="test1"/> some content </div>
</body>
</html>
I tried as below:
a[name^="test1"]:before{
content:"[prefix text]";
display:inline;
color:red;
}
a[name^="test1"]:after{
content:"suffix text";
display:inline;
color:green;
}
iframe a[name^="test1"]:before{
display:none;
}
iframe a[name^="test1"]:after{
display:none;
}
But inside "iframe" also these styles has been applying.
You have to first detect if your page is rendered inside an iframe and in that case apply an alternative CSS. It' can't be done with vanilla CSS then it has to be done with some JavaScript:
<script type="text/javascript">
function getTopWindow() {
try {
return window.top;
} catch {
// If we can't access window.top then browser is restricting
// us because of same origin policy.
return true;
}
}
function isRendererdInFrame() {
// If top window is null we may safely assume we're in iframe
return window.self !== getTopWindow();
}
function loadCss(location) {
if(document.createStyleSheet) {
document.createStyleSheet('http://server/stylesheet.css');
} else {
var styles = "#import url('" + location + "');";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
}
</script>
Code to load CSS from JavaScript is from How to load up CSS files using Javascript?.
With all that code you may simply write (even just after that inside <script> block):
var cssToLoad = isRendererdInFrame() ? "iframe.css" : "not-iframe.css";
loadCss("http://server/" + cssToLoad);
Of course same technique can be applied to patch CSS with iframe specific styles:
if (isRenderedInFrame())
loadCss("http://server/iframe-patch.css");
i dont know how to detect if page is opened in iframe or not, but there is one possible(not very nice) workaround, you can set iframe to width which is not commonly used by devices (example 463px) and then set media query for this resolution which apply when content is shown in this iframe. This is really nasty way since its not 100% and i would not recommending that.
I'm working on a one single page navigation system; Is there is a way to change the <title> of a page when a div is :target (#divname in url)?
EDIT: Yeah, sorry, a Jquery/javascript solution works as well.
If the url contains #somePage, use #somePage as a selector and retrieve it's data-title value.
Then set <title></title> as that value. location.hash produces #somePage
$('a').click(function(event){
event.preventDefault();
if(location.hash) {
var newPageTitle = $(location.hash).data('title');
$('title').text(newPageTitle);
}
});
Add a data attribute to your div and set it's value to what the page title should be when that link is clicked.
Some Page
<div id="somePage" data-title="This Is The Page Title"></div>
It can be done in following way:
Assume that you have this html element:
<a onclick="onClick1()" href="#test">
link
</a>
and you have this scripts:
<script>
function onClick1(){
setTimeout(onClick,100);
}
function onClick(){
alert(1);
if(document.URL.indexOf("#test")>=0){
document.title = "Your title";
}
}
</script>
then you'll get on click what you need.
Here is example.
The following jQuery function returns a correct JSON response from Spring.
$(function() {
$('#dataForm').submit(function() {
var rows;
var form = $(this);
rowCount(function() {
var url = form.attr('action'),
rows = form.find('input[name="rows"]').val();
if(rows==0)
{
insert();
}
else if(rows==1)
{
update(function(response){
$("#textContents").val(response);
alert($("#textContents").val());
//Alerts the correct contents from the database
});
}
});
return false;
});
});
This function is called when the form is submitted.
The alert box in the else if condition alerts the correct contents from the server. textContents is a <span></span> id like.
<span id="textContents"></span>
Everything is fine but the response is apparently not being written to the HTML span tag for unknown reasons.
I have even removed design with all HTML templates of the current page but no clues found. If I changed the span tag to some other like <textarea></textarea> for demonstration, then the contents is displayed.
There are no misplaced tags on the form. I have also tried to replace <span> with <div> but it didn't help either. What am I overlooking here? Obviously, something really very basic.
You should use $("#textContents").html(response);
Because <span> has no value.
I would like to add a section to an existing webpage, but only make it visible if the user types the URL with a particular anchor link. Is this possible? Or is it possible to redirect to a new page if the URL has a certain anchor link?
Since you don't mind using JS, you can listen to the onhashchange event to decide whether the specific section should show.
http://jsfiddle.net/C3kHT/
window.addEventListener("hashchange",function(){
if(location.hash=="#trap") /*show section*/
},false);
Sorry that I don't have an IE 8 at hand, so I'm not sure if the fiddle code actually work in IE 8.
To redirect if a url has a certain anchor:
var anchor = "#tag";
var url = "http://www.google.com";
if(window.location.indexOf(anchor) !== -1){
window.location = url;
}
Maybe try this. Start out with your hidden section set to display: none;, then use jQuery to unhide it based on the hash in the url.
CSS:
.hiddenDiv {
display: none;
}
jQuery:
function showDiv() {
if (window.location.hash === '#hashNecessaryToShowDiv') {
$('.hiddenDiv').css('display', 'block');
}
}
showDiv();