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.
Related
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.
I am using Adobe Contribute (HTML editor) to edit a website. I have two links on my page that both link to the same PDF file type. However, when the links are clicked they are displaying the PDF differently in IE (the issues does not occur in Chrome): One with the PDF tools and thumbnail sidebar, and the other just as a plain PDF file by itself.
One looks like this:
The other looks like this:
Here is the HTML code:
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 1 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK</p>
<p style="margin-top: 0; margin-bottom: 0;"><strong>DATE 2 HERE</strong></p>
<p style="margin-top: 0; margin-bottom: 0;">FILE NAME LINK 2</p>
What I need is for them both to look like the second one. Any ideas as to what might be causing them to come up differently?
I'm pretty sure that Chrome and IE will display PDF's differently. It's just how they were designed. I'm not to sure about how to make them look the same, I'm not even sure that you can. But, I think it's just the browsers themselves.
Turns out that it was a setting within the PDF itself that I needed to change. The following settings fixed my issue.
Go to File>Properties
In the Document Properties window, select the Initial View tab
In the Document Properties window, choose "page only" for Page layout, and check the "hide toolbars" box.
In the Document Properties window, click the OK button
Go to File>Save
Reopen the document
So I have 4 different room transitions (up, down, left & right). I want to be able to set each transition to go to a specific page, and repeat if the same transition is clicked again.
For example, have "left" (data-animation 55) goto "Page1.html", and if I was already on "Page1.html", then it would just transition right back into the page. And I would have the "right" button, go to "Page2.html", etc.
https://github.com/cweigen/page_transition_room
There's the github repo, but this is the code that I've been messing with, experimenting with different versions of it to attempt going to a specific page and repeating if the same button is clicked, but go to another specific page is another menu button is clicked.
<div class="pt-triggers">
<div id="dl-menu" >
<ul class="dl-menu">
<li data-animation="54"><a href="#" > right </a></li>
<div class="pt-triggers1">
<li data-animation="55"><a href="#" > left</a></li>
<div class="pt-triggers2">
<li data-animation="56"><a href="#" > down</a></li>
<div class="pt-triggers3">
<li data-animation="57"><a href="#" > up</a></li></div>
</ul>
</div>
</div>
<div id="pt-main" class="pt-perspective">
<div class="pt-page pt-page-1"><iframe src="http://visiondigit.al/VisionDigital_Launch/" width="100%" height="100%"> </iframe></div>
<div class="pt-page pt-page-2"><iframe src="http://scsuchat.com" width="100%" height="100%"> </iframe></div>
</div>
You can't expect others to download the repo and build it for you. Time matters! That's the first thing you need to learn how to ask a question properly on StackOverflow.
As you are a new user, I'm going to make one-off excuse for you.
The library you are using is not the best choice for your task. However, it does provide as many as 67 different transition effects, which are defined in **pagetransions.js** and called using data-animation attribute. Have a look at the js file and you can choose the specific animation you are looking for.
To solve your other problem, you'll have to write a bit of your own code as the author doesn't provide a function to link each button with specific page, nor hiding the button when you are already on that page. You can use jQuery to do so.
But like I said, this is not the best nor the only option you have.
Check
THIS DEMO
I have created a structure that mostly mimics your requirements. Have a play and try to understand the demo. The structure is quite simple. It uses two external resources which you can see and download from the fiddle.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
hi i am new to html and do not know any php or javascript. I have a simple html webpage with a picture in the middle. I want it so that when you click the picture text appears describing what the picture is but without going to a new webpage. is this possible to do on just html without using javascript or php and if so how is it done? thanks
It's possible to do something similar with the details and summary HTML5 elements.
See this Fiddle (Works only in Chrome/Safari/Opera)
<details>
<summary><img src="image-source"> Click here for more information</summary>
<p>more information</p>
</details>
Due to the lack of browser support, I would not recommend using them. See caniuse.com - summary
You could also use the HTML title tag. The text you wanted to appear would show up on mouseOver on all browsers.
<img src="xxxxxx" title="This is the title" />
Check out on Fiddle