We Keep Coding

Search bar to search content in a single page website

I have a single-page website that searches the product and displays it in a product div. I have used javascript onclick to redirect the page to product div. It is working in desktop view but there is a problem in Mobile view. When I search in the Mobile view and click the search button then the page is not redirecting to the div the first time. It closes the virtual keyboard on the first click and redirects after the second click when the keyboard is hidden.
I want to redirect directly when the button is pressed. I have tried the blur() function but it is not working. I have checked to redirect to the other page and it is working but I want to redirect to the div on the same page because I have a single-page website
<form class="navbar-form navbar-left" action="index.php/#cat_1">
<div class="d-inline-flex ">
<input type="text" class="form-control" placeholder="Search" id="search">
<button style="padding:0px; margin-left:5px;" type="button" class="btn btn-info" id="search_btn">
<i class="fa fa-search" style="color: white; font-size:20px;"></i>
</button>
</div>
</form>
$( "#search_btn" ).click(function() {$( "#search_btn" ).click();location.href='#cat_1'});

Put in elementor modal pop up box to show" Subscription Confirmed"

I would like assistance with code to put in elementor modal pop up box to show" Subscription Confirmed" confirmation that they have subscribed to newsletter here is the code I'm going to use for collecting emails its from the newsletter plugin:
<div class="tnp tnp-subscription"><form action="https://example.com/?na=s" method="post"><input
name="nlang" type="hidden" value="" />
<h1 style="text-align: center;"></h1>
<h3>Subscribe to get 20% off your first</h3>
<h3></h3>
<h3>order with mysite</h3>
<h3></h3>
<div class="tnp-field tnp-field-email"><label></label><input class="tnp-email" name="ne"
required="" type="email" /></div>
<div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit"
value="Subscribe" /></div>
</form></div>
Thanks any help would be appreiated

You could use alert();
alert("Subscription confirmed!");
If that doesn't suit your likings, then I recommend seeing this, and you could customize the css of the box however you want.

Close tab index order in a container/div

I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>

Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>

link href with image onclick jquery

I have an <a> and div control for pop up window function. The popup is working correctly. I want to set an image click to open the alert pop up, i.e. on image click I want to redirect to href action. My code is the following:
<div id="openModal" class="modalDialog">
<div> X
<h2>Timesheet Comments</h2>
<input type="text" class="TxtNotess" onchange="GetChange" />
<input type="button" class="BtnComment" value="Save" />
</div>
</div>
I have some CSS code to handle the popup, and now I want to use an image and try to call the href action on click event of image
<img src="~/Images/comment.png" class="testmy" />
<a href="#openModal">
</a>
$('.testmy').click(function() {
alert('hi');
$('#openModal').click();
});

Put the and around the image
<a href="#openModal">
<img src="~/Images/comment.png" class="testmy" />
</a>
And remove the javascript code afterwards, that is not needed

Loading Placeholder tag in FORM when variables are set

I have a simple user settings form written in HTML5 which commits user defined settings to local storage.
I want it so that if someone access the settings page again, and the user settings are defined the placeholders and/or values prefill the form with those settings.
I have tried using window.load, document.ready at the end and the beginning, but I can only get the form to load thre values if I click reload. I need these value to prefil if the page is visited.
Here is my version of the form which loads the values if you RELOAD the page
Script first
function loadUserSettings() {
$("#full_name").attr("placeholder", db_user.full_name);
$("#mobile_number").attr("placeholder", db_user.mobile_number);
$("#email_address").attr("placeholder", db_user.email_address);
$("#full_name").attr("value", db_user.full_name);
$("#mobile_number").attr("value", db_user.mobile_number);
$("#email_address").attr("value", db_user.email_address);
}
and now the form
<body>
<div data-role="page" data-control-title="Settings" data-theme="b" id="settings" class="global_page">
<div data-theme="b" data-role="header" data-position="fixed" class="global_topbar">
<a data-role="button" data-transition="flip" href="index.html" data-icon="back" data-iconpos="left" class="ui-btn-left global_button">
Back
</a>
<a data-role="button" data-transition="flip" href="help_settings.html" data-icon="info" data-iconpos="left" class="ui-btn-right global_button">
Help
</a>
<h3 class="global_header">
Settings
</h3>
</div>
<div data-role="content" style="padding: 1%">
<form id="postSettings" action="" class="global_form">
<div data-role="fieldcontain" data-controltype="textinput" class="full_name">
<label for="full_name">
Name
</label>
<input name="full_name" id="full_name" type="text" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="email_address">
<label for="email_address">
Email Address
</label>
<input name="email_address" id="email_address" type="email" data-mini="true"/>
</div>
<div data-role="fieldcontain" data-controltype="textinput" class="global_text_input">
<label for="mobile_number">
Mobile Number
</label>
<input name="mobile_number" id="mobile_number" type="tel" data-mini="true"/>
</div>
<input id="store_posting" type="submit" data-icon="plus" data-iconpos="left" value="Store Information" class="global_button" onclick="dbGoUser()"/>
</form>
</div>
</div>
</body>
<script language="JavaScript">
document.ready = loadUserSettings();
</script>
I have managed a workaround using a function that I attach to my settings buttons which basically
function loadSettingsPage() {
window.location.href = "settings.html";
}
and this works everytime prefilling the placeholders / values no problem, however I am using a datatransition link of 'FLIP' which is lost using the above function.
SO ideally I want to either fix injection of the placeholders when I click a normal link (which I suspect is just a page refresh type option that does not loop) or make my loadSettingsPage use the JQuery flip transition.
Thanks in advance for any assistance.

OK, I was able to get around the issue with some custom functions. I had to lose the flip effect, and move to a simple fade but I ended up using
function fadeIn() {
$("body").hide();
$("body").fadeIn(500);
}
function loadPageSettings(urlvar) {
$("body").fadeOut(500, function(){ window.location.href = urlvar; });
}
for the custom functions
All hyperlinks used something like this
<a id="home_new_journey" data-role="button" onclick="loadPageSettings('journey_info.html')" data-icon="plus" data-iconpos="left" class="global_button">New Journey</a>
and at the footer of every page I just had
<script language="javascript">
window.onload = fadeIn();
</script>
So now I have pages loading properly with all dynamic content an a consistent fading effect.