Posts

Showing posts with the label html

Linking radio butttons to dropdown menu

I was hoping to complete this little project without using any if/else/while/for/ whatever control flow statements and in just plain javascript but I seem to run into problems. I am just looking to connect the radio buttons to the drop down menu so that when one is clicked, the other is highlighted. For instance, right now I hae it so that when you select an item from the drop down menu using the setRB() function, it sets true the corresponding radio button. I'd now like to get the radio button to set true to the corresponding dropdown menu item. Can this be done with the conditions above or do I need to use control flow statements (I believe that's what they're all called). Thanks. Yes, it is possible. Access option with the selected option value: document.querySelector("option[value='x']") To connect your Select to Radio buttons - and vice versa , you could do like: The above uses ES6 syntax, Sun kindly provided a ES5 version you can find in this jsFiddl...

Styling input type file button

I have a question regarding the styling of the input type file button. Since I cannot style the file input button, can I make a div that I can style how I want and when I click it , it triggers the input type button which opens the browse window ? If yes, any suggestions how to do it ? Thank you. Yes you can, this is one of the most used hacks for styling file-input. Take a look at http://www.quirksmode.org/dom/inputfile.html May be you can hide the input element and make use of a div for styling purposes.. You can style the file input with just css By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Data will not be shown after entering the required info in the search bar

I have the file dataout.php in which I am trying to enter the locknumber into the field given and have it display on the data from the phpmyadmin database that is included in the lock number. When I get to the page and type in a lock number it goes from http://152.116.203.115/dataout.php to http://152.116.203.115/dataout.php?lock_number=4556 in the URL but nothing is shown. There is data in the database with a lock number that is 4556. Here is my code if you can help that would be great. thank you. You'll need to grab the value from the lock_number input. To do that you will need to have: Also it looks like you are using mysqli prepared statements to query, but then also using mysqli_query() and mysqli_fetch_array() . The way you set up your $sql query will not work for the latter 2 methods mentioned. Try using this if you want to use the latter two methods: Also read about SQL Injection Here By clicking "Post Your Answer", y...

How to make slider arrows taller

I want to create my slider's arrows taller. I want them to be stretched vertically. I use WordPress plugin called SmartSlider. I have already tried to use CSS : I have found it on the plugin's website. When I change only height to be greater than width arrows remain in the previous size... I also tried using : This is the previous arrow (from Chrome inspect): Img is inside that div. And image: Slider I want these arrows to be almost as tall as the slider, but thin as now. This is my first post, sorry for my poor language and thanks for Your help. I would create a container for them. Give the container a position: relative; , the arrows a position: absolute; , then you can use 100%. The reason height: 100%; is not working right now is the browser doesn't know what to compare 100% to, since there is no given height for the parent element. By clicking "Post Your Answer", you acknowledge that you have read our updated term...

How can i create a calendar with customization days using Reactjs?

i'm a reactjs beginner, i want to create a Calendar using ReactJS in range two days, but i want to divide the squares of days two three shifts or divs each shift/div can be clickable. Like this picture. I Tried React-Big-Calendar, Calendar, and React-Calendar but no one of them can give me what i want, anyone can help me? You can use React-Component Calendar and return div in dateRender By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Positioning elements of different heights

Sorry for the vague title, but I'm not exactly sure what to call this. I'm making an assignment planner using HTML and JavaScript, and I've ran into a bit of a problem while trying to make a feature to snap your text to the nearest line. The planner itself looks like this The "Snap to Line" feature works by checking the Y coordinate of the note (which is an input element) and checking the nearest line. I know it's not good practice, but to make it easier everything is a fixed size, so I have an array of every line's Y coordinate it could snap to: [58,80,102,124,146,168,190,212,234,257,279,301,323,345,367,389,411,434,458,480,502,524,546,568,590,612] When the user creates a note or change's its position, this bit of code runs: So it gets the element's height, then finds the Y coordinate of the closest line and subtracts half the height of the element to find the proper coordinates. I arbitrarily used height/2 as opposed to height. I thought that sinc...

Vue.js Axios.post sends variables to php, but I cannot access those variables

I'm new to frontend development, and I'm facing a problem that I cannot resolve. What I am trying to do is open a new popup HTML page with parameters (which I can pass as an array) by calling axios.post method from my vue.js file. I googled possible solutions, but still could not find the source of the problem. Observing Chrome console, I suspect that axios.post works fine since it says: data: "Array( [index_id] => 1 [log_id] => 63)…ow.print(); // });", status: 200, statusText: "OK", headers: {…}, config: {…}, …} However, in the popup window, I cannot access the variables, or they are null . The following code is a function in my vue.js: And this is the very first part of popup_output_print.php Then the popup window prints index_id is null What am I doing wrong? UPDATE: following the comment, I just tried var_dump , and the variables are all null . :( What is going on is that axios.post have totally no effect to window.open: this make...

How to center list items in flex box navigation bar?

I have the following code: http://jsfiddle.net/0jh3fud9/2/ How do I center the list items ("LOGO", "REGISTER" "LOGIN", "SEARCH") within the border they are in? Try adding the commented CSS rules to your li elements (see updated fiddle): This will make each of the list items also behave as a flex item and will center them horizontally and vertically in their parent. What you should do is declare your elements as a flex container as you've done. Add the align-items: center; and justify-content: center; properties to them, but you don't really do that here, since there is no space in where you could center anything hence it doesn't know what to center it to. Remove flex: 1; and I recommend adding padding: 10px; and a margin: 5px; and it should work. If you want them to be close to each other then only add padding. P.S. you could also use a text-align: center; By clicking "Post Your A...

multi-line tag inside a tag being closing early

I am dealing with legacy HTML of the following type: But the browser renders this as: The problem is that the <span> tag is closed early. Is there anything I can do to get the browser to render this as it should or is the legacy HTML badly formatted? Thanks! You are closing the span tag after u tag. I think this can solve your problem: The HTML you are trying to use is invalid, the browser is attempting to fix it. You are Closing the initial "u" tag while the span is open. You can use this resource: The W3C Markup Validation Service https://validator.w3.org/ By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Image in table not placed as expected?

I'm trying to put two images side by side in a table and have the following behavior on the first image: To solve the first thing I'm using valign="bottom" but that doesn't seem to fully work. To solve the second issue I'm using padding-right:0px; margin-right:0px; but that doesn't work either. Can anyone help me achieve the behavior I'm going for please? Note that I'm using a table because I have other things in this table, I just took them out to simplify the question. First, you are using obsolete attributes, which is not recommended. Besides, some of the attributes try to set different values than the properties in the CSS, which is a no-no. Replace them all with CSS properties. Secondly, the vertical align property should be on the img rather than on the td. Then the distance between the two images; the second image has no border or margin, and neither does its td, so I'm not sure why you think there should be some spacing in between. I ...