JMRKER

April 22, 2020

Show some of you code attempts.

Much easier to discuss what you have done than what we can guess you might have done.

April 21, 2020

Is this what you are trying to accomplish?

<!DOCTYPE html><html lang="en"><head><title> Gallery Switch </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- From: http://w3schools.invisionzone.com/topic/61317-how-to-make-a-switch-button-useful/
      and: https://www.w3schools.com/howto/howto_css_switch.asp
-->
<title> Gallery Switch </title>

<style>
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }
 .flex {
	display: flex;
	flex-wrap: wrap;
	list-style-type: none;
    margin: 0; padding: 0;
 }
 .flex li {
	flex: 1 0 20%;
	min-width: 14em;   /* optional 200px, etc */     
	text-align: center;
    border: 1px solid black;
 }

 .hide { display: none; }
 img { width: 10em; height: 5em; margin: 1em; }
</style>

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
/* Rounded sliders */
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }
</style>

</head>
<body>

<h2>Toggle Galleries Switch</h2>

<label class="switch">
  <input type="checkbox" id="gallery12">
  <span class="slider"></span>
</label>
<p>

<div id="gallery1" class=""> <h2>Gallery 1</h2>
 <ul class="flex">
  <li><img alt="Gallery 1 - Image 1"></li>
  <li><img alt="Gallery 1 - Image 2"></li>
  <li><img alt="Gallery 1 - Image 3"></li>
  <li><img alt="Gallery 1 - Image 4"></li>
  <li><img alt="Gallery 1 - Image 5"></li>
  <li><img alt="Gallery 1 - Image 6"></li>
  <li><img alt="Gallery 1 - Image 7"></li>
  <li><img alt="Gallery 1 - Image 8"></li>
  <li><img alt="Gallery 1 - Image 9"></li>
  <li><img alt="Gallery 1 - Image 10"></li>
 </ul>
</div>

<div id="gallery2" class="hide"> <h2>Gallery 2</h2>
 <ul class="flex">
  <li><img alt="Gallery 2 - Image 1"></li>
  <li><img alt="Gallery 2 - Image 2"></li>
  <li><img alt="Gallery 2 - Image 3"></li>
  <li><img alt="Gallery 2 - Image 4"></li>
  <li><img alt="Gallery 2 - Image 5"></li>
 </ul>
</div>

<script>
 function init() {
   document.getElementById('gallery12').addEventListener('click',
     function () { 
       document.getElementById('gallery1').classList.toggle('hide');
       document.getElementById('gallery2').classList.toggle('hide');
     }
   );
 } init();
</script>

</body>
</html>

April 20, 2020

13 hours ago, Mikado said:

Hi,

Following the navigation bar from here, the navigation bar is surrounded by spaces. How to remove them?

What have you tried or what have you changed?
Which example (of the many available) are you using?

April 16, 2020

There are many examples on the web.
Do you have one particular example you would like to emulate?

BTW, welcome to the forums.

April 16, 2020

This would not be a very easy project using HTML only.

You might consider using a PHP program and/or an SQL database to collect and store/retrieve you data.

April 15, 2020

Looks like DW cannot process 'template' commands using the backtick.

Also, if you want to apply code to both older and newer versions of the browsers
you will need to maintain a lot of unnecessary code and documentation.

Can not use newer versions of JS if you are stuck using older browsers and frameworks.
Sorry.

April 13, 2020

As soon as you execute the "document.write()" statement, the program reloads the page and you lose all earlier calculations and references.

Consider writing the results to another element and use ID values to help with references.

BTW, welcome to the forums.

April 13, 2020

What does your code look like? Where is the URL of the location where you found this tutorial code?

To modify your statement: "I don't understand why ~~they~~ you don't fully explain ..." the problem without an example.

I understand you are a "newbie", but you've still got to help us understand the problem.

BTW, welcome to the forums.

April 13, 2020

9 minutes ago, Jay@TastefulTitles.com said:

I can't run your code because it apparently uses Jquery or some format that I don't have, but I don't see anything in your code that looks like a date picker. I see the date fields, which are required for the date picker, but there is no date picker attached. Am I missing something?

No, it does not use JQuery. If you copy the code into a text editor and save it with the .html extension,
you should be able to execute it from your local computer as is. The entire "datePicker" (as you call it)
are included by the HTML5 tags with the type="date" and the information between the <script> tags.

It is just simple HTML, CSS and JS code without anything else to load or execute.

April 13, 2020

Question: Did you try the code?

The second date does not appear until the first is selected.
The second date can then be changed if necessary without effecting the first.
I did not include any validation/checks, but you did not specify any at the time.

It's your project, so you can choose to do whatever you please.
Unless your browser does not support the new tags, it should work as needed
without a lot of confusing callbacks that I'm not sure I see the need for (?)
but you may desire for some other reason you haven't specified in your code yet.

Either way, good luck!

April 13, 2020

Not sure I understand the desired output, so this is just a guess.

It does not use your "TheDatePicker" functions, but it does use the new HTML 5 type="date" element.

Try it out and see if you can use it as is or modify to add additional validation checks.
See references in the code documentation

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<!--
  From: http://w3schools.invisionzone.com/topic/61265-using-thedatepicker/ 
  See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
-->

<style>
 #date1,
 #date2 { width: 10em; }
</style>

</head><body>
<table>
 <tbody>
  <tr>
   <td style="text-align:center"> 
    <div id="input-wrapper" class="w3-container" style="text-align:center">
     <input id="date1" type="date"  onchange="dateExtend()"
            class="form-control w3-show-inline-block w3-border")>
     
    </div>
   </td>
<!--			2ND DATE FIELD			-->
   <td id="wrapper2"> 
    <div class="w3-container" style="text-align:center">
     <input id="date2" type="date" placeholder="Last show"
            class="form-control w3-right w3-border">
               
    </div>
   </td>
  </tr>
 </tbody>
</table>

<script>
Date.prototype.addDays = function (days) { return new Date(this.getTime() + days*24*60*60*1000); }
Date.prototype.toYYYYMMDD = function() {
  return `${this.getFullYear()}-${(''+(this.getMonth()+1)).padStart(2,'0')}-${this.getDate()}`; }

function dateExtend() {
  const minDate = document.getElementById('date1').value;

  const maxDate = document.getElementById('date2');
        maxD = new Date(minDate).addDays(11);
        maxDate.value = maxD.toYYYYMMDD();
}
</script>

</body></html>

BTW, welcome to the forums.

April 9, 2020

I am unclear of your request, so this is just an attempt toward a solution.

First, move the height and width definitions in the <img> tags to the CSS section.
Also, be consistent in using the 'px' notation which is not used in the tag portions.

Second, change

.myDIV:hover + .hide {

to

.myDIV:hover .hide {

to get the effect I think you desire.

Finally, I don't know what is to happen with the displays of the first and last <div> elements.
You hide the second with the '.hide' class, but you show the first when you don't have any definition to hide it.
What are you trying to do here.

<!DOCTYPE html>
<html>
<head>
<title>Display Hidden Content OnhoverEvent</title>
<!-- From: http://w3schools.invisionzone.com/topic/61228-display-hidden-element-when-hovering/ -->

<style>
body {
  padding: 50px 10px;
  margin: 0 auto;
  max-width: 900px;
}
.hide {
  display: none;
}
.myDIV:hover .hide {
  display: block;
  color: red;
}
img { display: inline-block;
      height: 100px;
      width: 100px;
}
</style>

</head>
<body>

<div class"outputr1"> I want to display Hidden/hover content here </div>
<br><br>

<div class="myDIV">
 <img src="1.png" alt="1.png">
 <div class="hide"> Hover content 1 </div>
</div>

<div class="myDIV">
 <img src="2.png" alt="2.png">
 <div class="hide"> Hover content 2  </div>
</div>

<div class="myDIV">
 <img src="3.png" alt="3.png">
 <div class="hide"> Display Hover content 3  </div>
</div>
   
<div class="hide"> I am Hover Content but i don't want this to display.</div>
  
</body>
</html>

Note: I don't have a reference to your '.png' image files so I just inserted an "alt=xxx" attribute as a place holder.
Always a good idea to include description of the images in case they are not show for some reason.

BTW, welcome to the forums.

April 7, 2020

How do you plan on getting the input?

Are you typing in the word or can it be a button (radio, checkbox or dropdown) selection?

April 4, 2020

I'm unclear of the second part of your question,
but you can fix the first part with the following change.

Add the following to the last line of the openMainCategory function:

	evt.currentTarget.className += " active";
  openSubCategory(null,'');
}

March 27, 2020

In the last post, just add this one line:

}
openCity('click','London');
</script>

before the closing script tag.

March 13, 2020

What does your webpage look like? What code are you using?

Make it as simple an example as you can.

March 13, 2020

Move the id="defaultOpen"

From:

To:

BTW, welcome to the forums.

February 22, 2020

Needs following change to make it work.

  <script>
      function select() {           
        var sel = document.getElementById("cars").value;                  
        document.getElementById("cars1").options[sel-1].disabled = true;                  
      }            
  </script>

Note also that it will ONLY disable the selection without the ability to deselect a choice once chosen.

Also, the label tag 'for=option' is useless as the 'for' applies to an ID not an 'option' to the select tag.

February 18, 2020

Unclear of request. Clarification please.

Are you wanting to display an image each letter of 'Joy' based upon user input?

Or, are you trying to display a symbol of each letter of 'Joy' based upon some substitution logic?

Or, are you wanting to display 'Joy' as a different font family or size or color?

Do you have an example of what you are trying to create?

February 9, 2020

Your request is very unclear, but just to prove that you code can be used in a 'switch' statement,
consider this:

<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">

<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>

<!-- link rel="stylesheet" href="common.css" media="screen" -->
<style>

</style>

</head><body>
<button onclick="rnd5()">Test</button>
<pre id='demo'></pre>

<script>

function rnd5() {
  var number = 9;
  var r = Math.floor(Math.random() * number);
//  document.getElementById('demo').innerHTML = r+'\n';  // Simple display
  switch (r) {
    case 0: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 1: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 2: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 3: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 4: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 5: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 6: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 7: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
    case 8: document.getElementById('demo').innerHTML += `Number generated by switch was: ${r}\n`; break;
  }
}

</script>

</body></html>

January 4, 2020

It would be a lot easier to help if you include the HTML with your CSS
to determine what interactions would suit your problem best.

Without seeing anything but the CSS above
my first area to check would be the 'margin-top: -12px;' statement.

December 28, 2019

On 12/27/2019 at 12:05 AM, ishan_shah said:

Hello @surajt,
You can simply use the table. You can place both the images into two columns. This could be the easiest solution. Although you can set its height and width in such a manner that it could place horizontally in the same line. As <img> is an inline element.

Table would not automatically reformat to vertical display as in suggested code,
but would be clipped and lost if the images are too large for the screen.

December 28, 2019

On 12/5/2019 at 10:40 PM, shaili_shah said:

you can use css float property to achieve image side by side

refer this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_images_side_by_side

Which, if you looked at the code, is exactly what I suggested.

December 17, 2019

You will not be able to upload the text files from your desktop using JS.

I would be possible to load them from the server.

November 22, 2019

Too little code to help.

For example:
1. What does '.toggler' look like?
2. What does the HTML look like?
3. Is any JS being used to trigger the color change?

BTW, welcome to the forums.

PS: going by the name, not the # of posts.

Sign In

JMRKER

Posts

Joined

Last visited

Days Won

Content Type

Profiles

Forums

Events

Posts posted by JMRKER

arrow to go to next page

How to make a switch button useful?

Navigation Bar

Navigation Bar

Need Help Building Code

using TheDatePicker

translate jquery code to javascript

CSS Navmenu

using TheDatePicker

using TheDatePicker

using TheDatePicker

Display Hidden element when hovering

Combine strings to call on array?

Tab Menu

Tab Menu

div scrollable independently

about 1st tab

dropdown selection elimination

Store characters of input field into array?

is this a real editor or just case specific

How to style up and down arrow

How to place two images parallel to each other?

How to place two images parallel to each other?

Website comments page

How to style mobile nenu bar

Browse

Activity