I can't click on HTML button - javascript

You guys always help with my questions and I'm forever grateful for that!
I'm still new to programming and I'm having an issue with an HTML button. It's supposed to be a "message us" button that will connect to FB and then people can send a message to the fan page. The button works on just one page but we want to place this is some other pages where we're getting traffic but when I add it, it doesn't let me click on it, like it's just an image. I attached the code below.
You guys rock! Thank you in advance for your great suggestions!
<style>
.msgbtn{padding:0 16px;border-radius:6px;background:#4fa7f9;color:white;font-weight:bold;width:120px;}
.msgbtn img{height:32px;width:36px;padding:4px 0;float:left;}
.msgbutoon a{color: white; text-decoration:none;}
.msgbutoon{padding:6px 10px;}
</style>
<div class="msgbutoon">
<a href="https://m.me/903262919698329" target="popup"
onclick="window.open('https://m.me/903262919698329','popup','width=600,height=500'); return false;">
<div class="msgbtn">
<img src="https://www.feelsocial.io/images/fbmsgr.png">
<span style="height:40px; line-height:40px;">Message Us</span>
</div>
</a>
</div>

Try adding this href to your anchor tag href="javascript:void(0);"

Related

How can I add a link to an image opened in a lightbox leading to external ".html"?

I have a gallery in which the images that are clicked open in a lightbox. I want to add the option that the OPENED image can then be clicked again to link to an external page.
I already tried to wrap the tag in another tag - what was of course not successful - and was looking for some "data" code to add to the "href" line... but found nothing so far. Here is the code:
<div class="homepage-portfolio-preview-1 new-animation">
<a class="lightbox"href="img/Portfolio_img/Ele_macs.jpg">
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);"></span>
<span class="text">
<span class="h4 light"><b>WEBSEITEN LAYOUT</b></span>
<span class="empty-space col-xs-b15"></span>
<span class="simple-article large light transparent">TK Elementa</span>
</span>
</a>
</div>
I want the image link to the page where the project is described in detail BUT also want the viewer to be able to see the zoomed version of the image... Hoping for some help. Thanks
Have you tried putting the link tag inside the span?
<span class="background full-size" style="background-image: url(img/Portfolio_img/Ele_macs_thumb.jpg);">
Visit W3Schools
</span>

navigating different pages

I have a page index.html.Suppose I have other page index2.html.
By clicking on a certain link in index.html I want to move to a certain div id in index2.html.Is that possible using css or js?
index.html has following link:
<a href="index2.html #div2"> <!--code i am looking for-->
index2.html has following content
<div id="div1" style="height:1000px;width:100%"></div>
<div id="div2" style="height:400px;width:100%"></div>
Yes. This is possible. Infact, you have have almost done it right. change from
<a href="index2.html #div2">
to
<a href="index2.html#div2">
Means there should be no space between index2.html and #div2.
I hope this helps.
Yes just remove the space you put between the page and the div id
<a href="index2.html #div2"> <!--code i am looking for-->
Change to
<a href="index2.html#div2"> <!--code you need-->
Hope you get how this works

Why does the page jump up after redirection?

I stuck with a problem I can not solve. You may help me.
I have different information pages and at the end is the following link:
"You may find more pictures in our GALLERY"
It jumps to the gallery page and right section, but if all pictures are loaded, it jumps to top. I would like to avoid this jump up!
A part of the gallery php:
<div class="products-section">
<div id="apco">Apartment Concept</div>
<div class="products-grids">
<div class="col-md-4 products-grid">
<div class="gallery">
<a class="mask" href="../data/pic/22.jpg"><img src="../data/pic/22.jpg" class="img-responsive zoom-img" alt="/" title="Apartment"></a>
</div>
</div>
…
I also use jQuery because of design.
Please help me and clarify the problem.
I am beginner-intermediate HTML-PHP user and mostly work from templates.
Thank you!
I have the habit to use an anchor-tag to refer to when I want this kind of navigation. You can even nest an h1 or something else in it.
i.e.
a(id="apco")
h1 someText
Never failed me, I think some teacher hammered it in me a long time ago.
Hopefully it works out for you!
Delete #apco on the tag.
So,
"You may find more pictures in our GALLERY"

how link to magento review form in a specific jquery tab from outside

I am using a magento template which uses jquery.tabs.min.js for displaying different product information in different tabs.
Now I would like to send customers mails with a direct link to the review form, which is at the end of the third tab.
Unfortunatly the page if called from outside always opens with the first tab open.
So sending links with an additional hash from the tab id does not work.
I have already looked around many similiar threads but unfortunatly I am not very familiar with javascript, and I would need a realy detailed help, how to work this out and espacialy where to put the different snippets (i.e. inside the html of the page or in the js-file).
Something thar makes it maby more difficult is, that it would be helpful to not only open the third tab, but as well scroll down to the "review form" which is inside the third tab, at the bottom, and if there are more than a few reviews the visitor would not see the review directly.
So here is the html snippet, which represents my pages structure
<div id="product-tabs" class="gen-tabs gen-tabs-style-f">
<ul class="tabs clearer">
<li id="tab-description"><a class="current" href="#">Beschreibung</a></li>
<li id="tab-additional">Zusatzinformation</li>
<li id="tab-tabreviews">Bewertungen</li>
<li id="tab-product.tags">Schlagworte</li>
</ul>
<div class="tabs-panels">
<h2 class="acctab" id="acctab-description">Beschreibung</h2>
<div class="panel"> <h2>Details</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-additional">Zusatzinformation</h2>
<div class="panel"> <h2>Zusatzinformation</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-tabreviews">Bewertungen</h2><div class="panel">
<div class="box-collateral box-reviews" id="customer-reviews">
CONTENT OF CUSTOMER REVIEWS
<div class="form-add">
<h2>Schreiben Sie Ihre eigene Kundenmeinung</h2>
<form action="http://www.mydomain.com/review/product/post/id/8/" method="post" id="review-form">
-->>HERE IS MY REVIEW FORM<<--
</div>
</div>
<h2 class="acctab" id="acctab-product.tags">Schlagworte</h2><div class="panel">
<div class="box-collateral box-tags"> <h2>Schlagworte</h2>
CONTENT
</div>
</div>
Thanks a lot for any help in advance.
Update:
Maybe it is possible to extend the already existing function which routes the visitor "on click" directly to the review form, to work as well, depending on a parameter given with the URL (ie. a hashtag) ? Here is the peace of code from the template:
<?php //Open the "Reviews" tab, when "X Review(s)" or "Be the first to review this product" links are clicked ?>
<script type="text/javascript">
//<![CDATA[
jQuery(function($){$("#goto-reviews, #goto-reviews-form").click(function(){if($("#product-tabs").hasClass("accor")){$("#product-tabs .tabs-panels").data("tabs").click($(".tabs-panels .acctab").index($("#acctab-tabreviews")))}else{$("#product-tabs .tabs").data("tabs").click($("#tab-tabreviews").index())}})});
//]]>
</script>
If anybody could help me with that? Should be somehow easy if one have skills in JS ;-)
Have you tried adding the ID of the tab to the query string?
Http://www.mysite.com/product-URL.html#acctab-tabreviews
Adding the I'd portion of the li element with a hash should work

How do I add a second hyperlink to an anchor that is already occupied by JavaScript code?

Here is my reference page: http://ca.pockethm.com/setupaccount/feature-videos_library.php
I am using Dynamic Drive's "Dynamic Ajax" script to change the content in a 'containerarea' div. Here is a sample of my actual anchor code:
<a href="javascript:ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">
<img src="http://aaaa.pockethm.com/images/icon-youtubeTV.png" alt="Repair a Refrigerator Door Gasket" class="icon-image" border="0" />
<div class="icon-text">Repair a Refrigerator Door Gasket</div>
</a>
What I need is to have the page jump to an <a name="videoTop"> anchor positioned above the video window upon clicking the YouTube icon to watch a particular video in preparation for when I add a lot more videos. I've tried onclick, onfocus, onmouseover, and a variety of other code mashes....to no avail. There's a strong possibility I'm doing it wrong, though.
Thanks in advance for the assist.
You need to stack it in the inline code:
<a href="javascript:document.location.hash='#videoTop';ajaxpage('videos-maintenance/appliances-repair_fridge_gasket.php', 'contentarea');">

Categories