Is there a way to dynamically adjust the width and height of this div element after it is clicked, essentially treating it like a button?
The current HTML structure is as follows:
<div class="sq" onclick="main.function();">
...
</div>
Below is the CSS styling for the 'sq' class:
.sq {
width: 102.5px;
height: 2px;
}
By utilizing only CSS, it is possible to achieve this.
button:focus {
width: 200px;
height: 200px;
}
As an illustration, here is a codepen link. http://codepen.io/doggard/pen/PzERxg
Update: To apply the same technique to a div, you can include a tabindex attribute in the div element.
<div tabindex="1"></div>
Are you looking to adjust the size of the .sq div when it is clicked?
If that's the case and you're open to using jQuery, here's a possible solution:
$(document).ready(function() {
$('.sq').click(function() {
$(this).css('height','200px');
$(this).css('width','200px');
})
})
</script>
<div class="sq">
</div>
$(document).ready(function() {
$('.button').click(function() {
$(this).toggleClass('active');
});
});.button {
transition: all 0.25s ease;
display: inline-block;
border: 2px solid #f00;
vertical-align: top;
text-align: center;
padding: 5px 10px;
margin: 5px 10px;
cursor: pointer;
height: 20px;
width: 80px;
}
.button.active {
line-height: 30px;
width: 120px;
height: 30px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="button">Click Me</div>
<div class="button">Press Here</div>
<div class="button">Toggle</div>
<div class="button">Activate</div><div class = "sq" onclick="updateSize();">
Vanilla JavaScript:
function updateSize(){
document.getElementsByClassName("sq").style.width = "200px";
document.getElementsByClassName("sq").style.height = "200px";
}
Follow this method to achieve it:
$(function(){
$('.sq-unique').click(function(){
$('.sq-unique').toggleClass('sqClick');
});
});.sq {
border: 1px solid green;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique {
border: 1px solid red;
width: 102.5px;
height: 2px;
float: left;
cursor: pointer;
}
.sq-unique.sqClick {
height: 200px;
width: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="sq-unique">
</div>
<div class="sq">
</div>In my Angular 4 application, I encountered an issue with a date retrieved from an API call. The date is in the format '1990-03-31T23:00:00-06:00' and when attempting to create a Date object and retrieve the month using getMonth(), it returns the ...
Is there a way to dynamically create an array after receiving an AJAX response? Upon getting the AJAX response, the variable data.villages contains the data. To iterate over its values, the jQuery each function can be used: $.each(data.villages, functio ...
My task involves creating a summary of locations using the Google Maps API. The map displays letters corresponding to different waypoints, and I have a separate <div> containing all the route information. Currently, I have the route information stru ...
After going through this tutorial at , I successfully implemented a system in my Forge viewer app to add sprites on mouse click. However, I am curious if there are other parameters that can be modified besides changing spriteSize, such as the sprite ancho ...
Below is a snippet of my CSS sprite code: #IconSet a { width: 36px; height: 36px; display: inline-block; } #DeviantArtIcon { border-width: 0px; border-style: none; background-image: url(http ...
I've been attempting to prevent a page from scrolling after selecting an anchor link. Currently, the page layout includes a larger version of an image appearing in full view on the right panel after clicking on an image in the left panel (with text u ...
I have encountered performance issues with Vue.js in my existing code base. Additionally, I noticed a notice in the browser console: https://i.sstatic.net/KY1B3.png So, I believe that one simple solution could be to switch Vue into production mode. Foll ...
While analyzing a code snippet, I came across an issue with a variable causing an error. function call(data) { $.each(data, function(index, value) { var ddlId = 'ddlCat' + data[index].docId; var html = '<tr id="supp_doc_row_&ap ...
Although there may be similar answers to this question, I am in search of something different. On the client side, I have a signUp form that will make a post request to the server with the username and password. On the server side, I authenticate the req ...
I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input. I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to r ...
Trying to execute the code below, I encountered an issue where removing one item from the array did not completely remove it (other checkboxes in each row remained). I attempted using :key="index" but that did not solve the problem. However, changing :key= ...
As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...
Facing an issue with React Router where the main page renders but other pages do not. I am using a library called react-responsive-animate-navbar for the Navigation bar, which works well and changes the URL when clicked. However, the specified component fo ...
I have a script that sends the value of a text input from an HTML form to emailform.php. This PHP file then adds the data to a .txt file. The issue I'm facing is setting the value of $email in the PHP file to match that of the HTML input field. Curren ...
I am facing an issue where I need to validate a form before the HTML button's serverclick event fires. However, the client and server events are triggering at the same time. HTML <button runat="server" id="imgLogin" type="submit" class="btn" styl ...
I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...
I've been attempting to create a menu using data-subtext, and while I have come across some suggestions on stackoverflow, I'm still having trouble getting the menu to function properly. The issue I'm facing is that the menu doesn't seem ...
My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...
I am new to web design and I am trying to create a webpage similar to the one shown in this image. However, I want to set the height and width of the divs using percentage values instead of pixels. Whenever I attempt this, the boxes end up overlapping or ...
Below are two different pieces of jQuery code labeled as (1) and (2). I am wondering which one is more efficient and why. Additionally, should the function myfunction be placed at the top or bottom of the code? I have noticed both approaches being used in ...