Hi guys I have bought this template, and I am trying to get a link into a sidebar (under links to tabs)
<ul class="nav2 nav">
<li class="selected">Seniors - Studies </li>
<br><div align="center"><img src="images/seniorbrochure.jpg" width="200" class="foo"><br>Download PDF<br><br><div class="heading">We Support</div></div></ul>
This is a bit of the code, as you see I have a link download PDF to pdf.pdf (just as testing) but whenever I click on it it actually loads a blank tab and doesn't try to go to pdf.pdf at all, I can't put the link outside of the ul tab or else the whole layout gets messed up, is there any way around this?
Is the filepath correct? "your website/folder/pdf.pdf" . Or maybe you could try putting a button in the sidebar to download it - <input type="button" value="Download PDF" onClick="window.location.href='/folder/pdf.pdf'">.
Related
There is a slider at the top of the page.
Each slide has a layer of list and anchor tags with image tag inside.
https://www.rakuten.ne.jp/gold/yanosp-fineplay/
Here is the HTML code for the slider part.
<div class="slider">
<ul class="bxslider">
<li>
<img alt="ランデイズパック リュック" src="sliderimg/rundaysslider.jpg" />
</li>
<li>
<img alt="" src="sliderimg/porchn.jpg" />
</li>
<li>
<img alt="" src="sliderimg/slider13.jpg" />
</li>
</ul>
</div>
As you can see, each anochor tag has target="_blank" and it's supposed to open a new tab for a new page. However, clicking won't open the link, let alone a new tab. I was wondering if this has something to do with z-index or something, but what's weird is that, if you go ahead and hover each image in slider, the link still appears. I just can't figure out why this is happening, and any helps would be greatly appreciated.
Thank you so much.
PS - I do not think this has something to do with bxslider plugin, so please refrain from just commenting something like "Try other slider js"
I think this is how the bxslider.js plugin works,
When you click, the action is working on the bxslider.js plugin slidering instead of clicking the link.
but when you alread slider to other picture, the clicking anchor action is working. try it!
sorry for poor english.
I am having trouble getting my mailto link working on this landing page. I have been googling and still have not found an answer why a simple mailto link is not working using Bootstrap.
I am trying to get the "Contact us" link in the top right menu to open a mail window and the "Refer now" link needs to go to an anchor tag lower in the page, code below. Webpage can be viewed at: website code
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active">BENEFITS</li>
<li class="active">REQUIREMENTS</li>
<li class="active">CONTACT US</li>
<li><input type="submit" class='contact-button' value="REFER NOW" onclick="window.location.href='mailto:surveyorhr#carf.org'"></li>
<!-- For external page link -->
<!-- <li>External</li> -->
</ul>
</div>
Any help would be appreciated.
It seems strange to use an input type submit button for a mail link – those certainly are not made for mail links – apart from that any submit button would only work in the context of a form, i.e. inside a form element.
I would recommend to use a regular link and style it as a button using CSS.
(BTW: This has nothing to do with Bootstrap)
Currently you have some js running in main.js that is manipulating click events and preventing default browser behavior. If you remove the class "main-nav" from the div that contains your mailto link it begins to function again. Based on that I would revaluate your use cases in that js file.
This is something quite bizarre that I can't seem to explain.
On my magento shop I created a link to the content area and it's a simple a href link. Though sometimes when you click the link you just end up on the shop again, instead of following the link.
Page that this is happening on: http://www.musculi.com/
link I'm trying to click and that should redirect to /content is "Articles, Athletes and More" (the blue button)
Any ideas why this might be happening?
<li class="nav-item level0 level-top right">
<a class="level-top" href="http://musculi.com/content" title="Musculi Content: Articles, News & more">
<span>onze atleten, nieuws en meer</span>
</a>
</li>
EDIT: This one minute video illustrates my problem: (once the link works, it keeps working until you clear your cache, then it works on the second or third time it gets clicked)
https://youtu.be/uyrmXK-RBR8
I have used bootstrap nav nav-pills nav-justified
and i have 7 of these
<li>Form</li>
I have been able to click on form which will re-direct to the form page, but I can't seem to return to my home page without clicking back on the browser. I want to be able to just click on the Home button which i've included as part of my 7 <li>s I mentioned earlier. Also i would like to be able jump onto each page from the navbar tab.
<div class="header">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li><a href "#">Home</a></li>
<li><a href "#">About</a></li>
<li><a href "#">JavaScript</a></li>
<li><a href "#">JQuery</a></li>
<li>AngularJS</li>
<li><a href "#">API</a></li>
<li>Form</li>
<li><a href "#">Contact</a></li>
</ul>
</div>
</div>
So from that above, when i click on form, im on the form page, but i cannot go back to the homepage(index.html) unless i click back on the browser, i wanna be able to link to all the lists by clicking each other.
Consider using Ajax to load different pages dynamically (with association with jQuery it said to be simpler to use) for the desired behavior or put everything on the single page and show content only when user clicks the link by JS and CSS.
As soon as you use Bootstrap elements you probably have jQuery already included in your project.
Useful links:
jQuery Ajax
Hiding elements with CSS
Check this page jQuery.get there is a very demonstrative example
$.get("demo_test.asp", function(data, status)
{
alert("Data: " + data + "\nStatus: " + status);
});
where data - data received from the server. It should be your html code to replace the content.
To insert data use:
$.('#Content').html(data); //id="Content" is from the comment
if you do this in a local host and you created these files as i find out when you click on the home you get 404 page the only thing that you have to do is to link your homepage file to the home button if i'm wrong comment me and explain your problem more and then i will help you.
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.