I have a text + image side by side, and I want a function where the user can click on the image to make it bigger. I'm new to HTML/CSS so I was wondering how I can approach this. Thanks! (demo -> https://jsfiddle.net/DTcHh/6634/)
Is there any way to do this with pure HTML/CSS and no javascript?
The ones I found have been telling me to use javascript such as:
<script type="text/javascript">
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}
</script>
Is there a simpler way to do this in HTML/CSS?
You could use a CSS pseudo-class to change the styling when, for example, the mouse is over the image:
img:hover {
width: 300px;
height: 300px;
}
Generally, though, to add interactivity to your web pages, you will have to become acquainted with JavaScript. I don't know of any way to toggle a state (e.g. "zoomed-in") without the use of JavaScript.
You can think of the HTML as defining the content, the CSS as defining how it looks, and the JavaScript as defining how it behaves.
Related
I have a textarea generated with the bellow js code, I also have a button that creates additional text areas when clicked, I NEED to make each text area draggable, Ussually because the "id" is "myForm" it should become draggable using jquery $('#myForm') but it does not work, I have try all forms but it does not work. I also have check similar questions but not luck... I will appreciate if some one can help me out. in the folder I have the Html, The css and all jquery libraries working Ok.
I check with the alert box.
Note: all I need is a textarea with a button to add as many additional text areas and this areas to be draggable, the code to generate this text areas can be any code. In case there is a easier way to accomplish the same thing... Thank you in advance.
function myFunction() {
var x = document.createElement("FORM");
x.setAttribute("id", "myForm");
document.body.appendChild(x);
var y = document.createElement("TEXTAREA");
document.getElementById("myForm").appendChild(y);
}
Is HTML5 Drag and Drop what you are looking for?
All you need to do is define draggable=true in your element and code the relevant ondragstart and ondragend logic. This works with both vanilla JS and frameworks like React.
Made for you kindly however dosn't work in this editor
var new_offset = {top:30, left:40};
var new_width = 200;
var new_height = 150;
var newElement$ = $('<div><textarea id="textarea"></textarea></div>')
.width(new_width)
.height(new_height)
.draggable({
cancel: "text",
start: function (){
$('#textarea').focus();
},
stop: function (){
$('#textarea').focus();
}
})
.resizable()
.css({
'position' : 'absolute',
'background-color' : 'gray',
'border-color' : 'black',
'border-width' : '1px',
'border-style' : 'solid'
})
.offset(new_offset)
.appendTo('body');
textarea {
height:100%;
background-color:whit;
width:100%;
resize:none; border:none;
padding:0px; margin:0px;
}
div { padding:0px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
I hacked it and piggy tailed to a span element this way the span element is easy to make draggable with jquery, The textarea is not draggable but it has to follow the span element THUS is draggable.
The span element has the class= "drag",then I used the jquery $('.drag').draggable and that made the whole trick. Dirty code BUT it works 100% the way I needed.
I have a button in my page
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
That I want to have linked to making a hidden div (donation) visible. I'm not sure if the getElementById works with divs, but I couldn't find out either, because when I changed the Id to h1, with a simple color change for style, it didn't work either.
Is there a problem with my button or syntax?
You can still work this with an inline onclick.
Andrei is correct about the id needing to be an individual.
<button onclick="document.getElementById('donation').style.visibility='visible'">Support</button>
<div style="background-color: gray; width: 50px; height: 50px; visibility: hidden;" id="donation"></div>
Technically though, it's better to keep your css and javascript in the head tag or outside of the html.
In order for document.getElementById('donation') to return a DOM element this condition would need to be true
there should be one html element and only one with id="donation" in your page. For example: <div id="donation"></div>
It's possible that your function works flawlessly (you can easily tell if it is by looking at your browser console after you pushed the button) but your element would still remain not visible. For example, if its display property is set to none. There are many possible reasons why an element might not be rendered by the browser. The fastest way to pinpoint the reason would be for you to create a minimal, complete and verifiable example (using the <> button) where we could experience the issue.
For me, I think separating the codes will keep things clearer and readable.
<button id="donation_btn">Support</button>
The javascript
function enableDonation( button, donationElement ) {
// check if the button is defined
if ( button != undefined
&& button != null ) {
button.addEventListener( "click", function () {
donationElement.style.display = "block";
});
}
// execute the code on document load
window.addEventListener( "load", function () {
enableDonation(
document.getElementById( "donation_btn" ),
document.getElementById( "donation" )
);
});
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 using <a href> element along with :target css selector to show a <div> which by default is set to display:none. Problem is, that when I click on the link to show that <div>, it is automatically scrolling down my site towards that <div>.
Is there a way to stop the screen movement?
Unfortunately I am not yet proficient in anything besides CSS and HTML.
You can use event.preventDefault() to avoid this. Something like this:
$('a.yourclass').click(function(e)
{
//your code
e.preventDefault();
});
OR:
link
in the link enter:
Link here
You'll need JS anyway:
// (in jQuery)
$el.on('click', function(e) {
// find current scroll position
var pos = document.body.scrollTop || document.documentElement.scrollTop;
// let normal action propagate etc
// in the next available frame (async, hence setTimeout), reset scroll posiion
setTimeout(function() {
window.scrollTo(0, pos);
}, 1);
})
I don't know if this will flicker the screen. It might. It's a horrible hack either way.
In my Chrome, there's no flicker: http://jsfiddle.net/rudiedirkx/LEwNd/1/show/
There are two ways to tell the browser we don't want it to act:
The main way is to use the event object. There's a method
event.preventDefault().
If the handler is assigned using on (not by
addEventListener), then we can just return false from it.
Example:
Click here
or
here
This is a bit of a hack but you could use a basic css work around:
CSS only Example
#div1 {
height: 0;
overflow:hidden;
}
#div1:target {
height: auto;
margin-top: -110px;
padding-top: 110px;
}
#div2 {
background:red;
}
Click to show
<div id="div1">
<div id="div2">Content</div>
</div>
If you need it to be a little more flexible you can add some js...
More Flexible Example with JS
$('a').click(function () {
$('#div1').css({
'margin-top': 0 - $('#div1').position().top + $(window).scrollTop(),
'padding-top': $('#div1').position().top - $(window).scrollTop()
});
});
Basically you're pulling the top of div1 up with the negative margin and then pushing div2 back down with the padding, so that the top of div1 rests at the top of the window... Like I said its a hack but it does the trick.
Those links are anchor-links and by default made for those jumps :) You could use JS to prevent the default behaviour in some way. For example using jQuery:
$('a').click(function(e){e.preventDefault();});
or by default add return false; to the links
Avoid using :target all together and just use onclick event.
function myFunction()
{
document.getElementById('hiddenDiv').style.display = 'block';
return false;
}
I'm practicing event handlers but I cant seem to figure out how to make similar mouseHover effect using javascript on the website of lol.garena.ph (home,news,guides etc. The nav buttons). Help me out please.
Basically, you will have to make an .hover class :
.hover {
position: relative;
top: -5px; /* this will raise the element */
}
Then add the class to your element (with id el) with javascript :
<li onmouseover="this.className='hover';" onmouseout="this.className='';">Home</li>
Of course, this is just the principle. See a working example : http://jsfiddle.net/KbcPb/
But you could do it just with css : http://jsfiddle.net/42jLY/
I'm using this for my task. It'll make it look like a CSS hover effect.
in the HTML code :
<h1 id="titleRegister" onmouseover="changeToBlueColor()" onmouseout="changeToBlackColor()"> Register </h1>
and for the function in javascript :
<script>
function changeToBlueColor(){
document.getElementById("titleRegister").style.color = "blue";
}
function changeToBlackColor(){
document.getElementById("titleRegister").style.color = "black";
}
</script>