Hey everyone I know this question has been asked timelessly but I am a complete newbie to HTML, CSS and Javascript. I literally am on my fourth day of self learning how to code so please forgive me.
I want to test a page where if you click on a button it will display a picture, if you click on the other button it will display a different picture. Here is what I got so far, what would be by next steps and why? Thank you!
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg" style="display:none;>
<img id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button> Woof! </button>
<button> Meow! </button>
<script>
</body>
</html>
There are many ways to achieve this. The solution below uses onclick combined with data-* to reference which image a button should show or hide. Further, visibility requires the CSS class "visible" to be shown (try to avoid styling directly on the style attribute).
When an image should be shown, the existing visible image should be invisible. You could either store which one is shown, and only remove the class from that element - or as I have done, by removing it from all images.
To get the button we clicked, this is passed to the function in onclick=myclick(this). That means that we can access the clicked buttons attributes, specifically the data-href="dog". This is accessed as element.dataset.href.
var dog = document.getElementById("dog");
var cat = document.getElementById("cat");
function myclick(element) {
dog.classList.remove("visible");
cat.classList.remove("visible");
document.getElementById(element.dataset.href).classList.add("visible");
}
.myimage {
display: none;
}
.visible {
display: block;
}
<!doctype html>
<html>
<head>
<title> Just Two Buttons </title>
</head>
<body>
<h1><center> Pick a button! </center></h1>
<img class="myimage" id="dog" src="https://i.ibb.co/x24nhsc/dog-image.jpg">
<img class="myimage visible" id="cat" src="https://i.ibb.co/CsGsxJ5/cat-217679.jpg">
<button onclick="myclick(this)" data-href="dog"> Woof! </button>
<button onclick="myclick(this)" data-href="cat"> Meow! </button>
</body>
</html>
Related
im not a coder by any description so please excuse my lack of knowledge.
Im trying to make a basic web page with a floating chatbox style whereby when you click an icon, ( the icon represents words ) the text is filtered into the chatbox.
Im trying to make a communication page for my autistic nephew and he uses something called the PECS system and its a series of pictographical cards on a velcro board which he uses for sentence construction, its pretty basic and only works when he's got the kit with him.
MY aim is to make a web app of some kind ( but just starting with a simple web page to test it on him and see if he's interested in it ) so that anyone can access it on a tablet or phone and talk to him, or indeed he can talk to his friends at school.
there are already some platforms out there and apps, but they just don't quite hit the spot, plus they are expensive to run being subscription models.
my code is this below
<html>
<head>
<title>Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
// some sample icons but need to figure out a way to handle large numbers of feeligs-emotions-actions etc
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
<div class="chat-box"></div>
</div>
</div>
</div>
// chatbox elemt, should be floating when page scrolls as he clicks an icon
<style type="text/css">
.chat-box {
position: relative;
float: right;
background-color: #3fae96;
border: 1px solid #0b0b0b;
padding: 10px;
margin-right: 50px;
}
</style>
<script>
// references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
const chatBox = document.querySelector(".chat-box");
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// filename without extention to the message, causes text overfill othewise
const fileName = event
</script>
</body>
</html>
my problem is i can't get the text from the image click into the chatbox.. nor can i seem to make it 'float' and im pretty much at the end of my knowledge and don't know where to go next. the box is on the right but its not filling with any image names..
the idea is each image he click populates the chat box.. it works in a basic format where it puts the raw text at the bottom, but when i added the chat box function it all stops :(
Many thanks
So this was where i started from once i had the images "clickable" so i went to try and include the chat box feature but this is where im stuck
<html>
<head>
<title>PECS Message Builder</title>
</head>
<body>
<div class="message-builder-container">
<h1>PECS Message Builder</h1>
<div class="message-builder-body">
<!-- Pictographic images -->
<div class="pictographic-image-container">
<img src="I+want.png" class="pictograph">
<p class="picture-name">I Want</p>
<img src="Apple.png" class="pictograph">
<p class="picture-name">Apple</p>
<img src="to.png" class="pictograph">
<p class="picture-name">to/p>
<img src="eat.png" class="pictograph">
<p class="picture-name">Eat</p>
</div>
<!-- Message display -->
<div class="message-display-container">
<h2>Message</h2>
<div class="message-display">
</div>
</div>
</div>
</div>
<script>
// Get references to the DOM elements
const pictographs = document.querySelectorAll(".pictograph");
const messageDisplay = document.querySelector(".message-display");
// Add an event listener to each pictograph
pictographs.forEach(pictograph => {
pictograph.addEventListener("click", (event) => {
// Add the filename without extention to the message
messageDisplay.innerText += event.target.src.split('/').pop().split('.')[0];
});
});
</script>
</body>
</html>
i was experimenting with this idea Floating panels left and right CSS and im not getting far with it so i went to a w3 school page and was looking at examples and i think im out of my depth.
Temporarily, I simply wrote the names of the buttons Grid and List:
<button value="product_card_frontpage" class="grid-view">Grid</button>
<button value="product_card_full_width" class="list-view">List</button>
But in the final result, the buttons should not have the labels Grid and List. And they should look like this:
You can just make the button an image like this:
<!doctype html>
<html>
<body>
<button value="product_card_frontpage" class="grid-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2017/02/17/20/04/vector-frame-2075122_1280.png"></button>
<button value="product_card_full_width" class="list-view"><img style="height:25px;" src="https://cdn.pixabay.com/photo/2021/10/09/12/45/hamburger-icon-6694072_1280.png"></button>
</body>
</html>
I used generic photos, but you can pick the photo you want to show and edit the styles.
I have looked at css filters "invert" but i'm struggling to think how a can target all my images (which have the Id=images) to invert with a click on text link. I'd also need to be able to second click the link to remove the invert filter. If anyone has an idea that'd be great.
FYI:
All my image are tagged Id=images and are all in the same div.
The invert link (text) has it's own div which is fixed, z-index 2000.. (front layer)
Thanks
http://jsfiddle.net/hu8tn0qb/1/
Turn all your id="images" into class="images" (you can't use an id more than once), then add in the code below.
The first block of code is the jQuery that will add the "inverted" class to all images with the class "image" when the div with the id "invert_btn" is clicked. By using .toggleClass it will remove the class when clicked a second time.
$('#invert_btn').click(function() {
$(".images").toggleClass("inverted");
});
.inverted {
-webkit-filter: invert(1);
filter: invert(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="invert_btn">Click Me</div>
<img src="http://placekitten.com/g/200/300" class="images" />
<img src="http://placekitten.com/g/200/300" class="images" />
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>
I have a webform on which i display all the details of a particular record now i want to give my client print functionality so he can print those detail. Can this be done in asp.net and if yes then how?
You can use css to specify stylesheets to use for printing. There's not really anything asp.net specific about it - it's handled by the browser.
http://www.alistapart.com/articles/goingtoprint/
Based on what I understood, you want to print part of the page, right?
One option is to use a pop up a new page with content to be printed passed from the current page and let the user print it from the pop up page.
Please refer the following demo:
Print Demo
<script language="javascript" type="text/javascript">
function doPrint()
{
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="WithoutPrint">
This area will not print!
</div>
<div id="Print">
<!--startprint-->
This area will print!
<!--endprint-->
</div>
<input id="btnPrint" type="button" value="Print" onclick="doPrint()" />
</form>
</body>
</html>
Hope it helps...Thanks.