I need to figure out a way to have the Yellow Box <div id="bottom"> and the Text <div id="basket">SHOP NOW</div>link to google.com for example.
I have tried adding <div id="bottom">
</div> but nothing is working. It appears to skew the entire section when I add this syntax.
I have searched all over the place looking for an answer, I have read through almost all related StackOverflow articles and still can't figure out the correct way to do this.
Here is a link https://jsfiddle.net/sixpac/8p4m7oc2/8/ to my code.
Can someone point me in the right direction with this? Is this possible to complete without JavaScript? Thank you!
You are looking for something like this https://jsfiddle.net/8p4m7oc2/13/
<div id="bottom">
SHOP NOW
<div id="price">$70.00</div>
</div>
You can wrap the div element in an anchor element to have it link to your chosen url / file.
i.e.
<a href="www.google.com" class="fill-div">
<div id="bottom">
</div>
</a>
This should be the code:
https://jsfiddle.net/RreTH/
Edit:
This will make the whole div element link to google for linking just the text the should be enough to link only the text.
Simply change the basket div to <a>:
<a id="basket" href="http://www.google.com">SHOP NOW</a>
Related
I'm relatively new to HTML so maybe there's been a really blatant solution I've been missing. But I'm making a single-scroll website (with bootstrap) with a very basic navbar for people to jump to the section they want.
The navbar is currently an ul with a background image that appears from the right on hover.
I've followed various tutorials; created the anchor points and id tags, yet nothing seems to happen when I click on the navbar buttons. And I feel like I'm missing a fairly obvious solution here. I've shifted the position of the anchors around, and tried a few variants in both html and css I found online but none seemed to have solved it for me. I've tried it on other browsers, so it isn't a browser issue.
Here's the navbar code:
<div class="container-fluid menuholder">
<div class="menu">
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
</div>
</div>
and here's a relevant part of one of the sections it's supposed to automatically scroll to:
<div class = "container">
<div class="row">
<div class ="chap1title col-md-3" id="chap1">
<h3>Chapter 1:</h3><br><h2>The Storyteller</h2>
</div>
</div>
</div>
Aaaand here's some images of the menu and an example of where I'd like the Chapter 1 button to scroll to
Frontpage
Navbar
Where I'd like it to scroll to
Thank you so much in advance!
It seems like, your link is not valid, you are adding menutext inside the href which should actually take the link or the id of the anchor element
<ul class="nobull menutext">
<li>Prologue<br><font weight="bold" color="white"><strong>The Beginning</strong></font></li>
<li><br>Chapter 1<br><font color="white"><strong>The Storyteller</strong></font></li>
<li><br>Chapter 2<br><font color="white"><strong>The Big Idea</strong></font></li>
<li><br>Epilogue<br><font color="white"><strong>It Begins</strong></font></li>
</ul>
It seems like menu text is a class name, which should be added in the class
it's possible to target #kodak in accordion with div id?
I just want to make link www.xy.cz/#15248756/#kodak , something like this, when user click on link, it will redirect to the accordion and to text with id "kodak".
Thank you.
See code below
<div class="vc_tta-panel vc_active" id="15248756">
<div class="body">
<div class="content" id="kodak">
<p>text</p>
</div>
</div>
</div>
You can't have multiple fragment identifiers on a single element, so the only way to do this would be to change the accordion implementation so it didn't depend on fragment ids in the first place.
Have a look at Wikipedia how they are linking table of content to the respective sections.
In essence it is like:
link to Kodak Cameras
<h1 id="kodak">Kodak Cameras</h1>
I have a drop-down like so:
<div class="dropdown">
<select>
<option ng-repeat="i in sc.cl" value="{{i.deptname"}}><a ng-href="#{{i.id}}">{{i.deptname}}</a></option>
</select>
</div>
Basically, the dropdown element's name is inside an array and there are divs inside the html having the id as i.id like this:
<div class="right-bar">
<section class="contact-block" ng-repeat="i in sc.cl" id="{{i.id}}">
<div class="description">{{i.deptname}}</div>
<div class="inner-block">
<div ng-repeat="j in i.cgs">
<img class="vertical-image" src="frame.png">
<img class="horizontal-image" src="mobileframe.png">
</div>
</div>
</section>
</div>
whenever I click the dropdown element, I want it to scroll to the particular section. But nothing happens when I do so. Why does this happen? And when I tried inspect element in chrome, it doesn't even show the tags in the ng-repeat dropdown.
You should use Angular's $anchorScroll.
Please, take a look at this similar question: How to handle anchor hash linking in AngularJS
Uhhm, my suggestion seems completely unrelated as I'm a dummy at AngularJS. But I have a solution to scrolling to a section using jQuery. You could simply give the section an ID and animate scrolling to that point on click by calculating the top offset and animating the scrolltop to that point...If you want me to show you the code, I'll gladly do so...:-) (Oh and I know this should be a comment because it doesn't directly answer the question, but my reputation's 13 so I can't comment)...
Fiddle
I need to have my image inside 2 divs, why does it appear and then disappear?
I need it so that it's always on screen.
<div class="ad-container">
<div class="ad-item">
<img src="http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
Panthro,
Check and make sure there is no Javascript and any other code manipulating the classes: ad-container and ad-item.
The snippet of code you provided in the fiddle looks fine to me. There must be other code manipulating those classes.
Remove ad from the class names. JSfiddle blocks the content related to ads similar to AdBlock functionality.
<div class="container">
<div class="item">
<img src="http://joomlaworks.net/images/demos/galleries/abstract/7.jpg"/>
</div>
</div>
JSfiddle
I had the same issue. I was able to solve it by turning off my adblock for the page.
Your CSS must be causing the issue, check it or post what it is here.
I need to move all bookmarks inside the html page bit down. Is that doable?
something like that
<div class="anchordown" style="position:relative; top:-80px;">
<a name="learn">Learn bookmark</a>
</div>
but it doesn't work for me. The actual bookmark doesn't move at all
EDIT
I want to have the inside bookmark #learn to be displayed bit down not at the top of the page if I click so http://address/page.html#learn
Here is another alternative
<div class="anchordown">
<a name="learn" style="padding-top:80px;" >Learn bookmark</a>
</div>
You could try a margin or padding, like this:
<div class="anchordown" style="margin-top:80px;">
<a name="learn">Learn bookmark</a>
</div>