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>
Related
I am currently making an app. I would like to redirect the user to the next page but it is mainly just pressing the button and you would be brought over to the next set of details. It should still remain on the same html link. However, when I press the button, nothing seems to be working.
<div data-role="page" id="mainpage">
<h1>
<b>Converter App</b>
</h1>
</div>
<div class="app">
Convert
<div data-role="page" id="convertingpage">
<p> stuff on my second page</p>
</div>
</div>
I am sorry if this sounds rather complex or hard to comprehend.
Assuming convertingpage is an HTML page which is in the same location of Main page. ( if different than hmtl change the html suffix accordingly)
When you specify href="#convertingpage" it means to look on the same page for an element with an ID of convertingpage.
If you want to be redirected to other page use:
Convert
If you want to stay on the same html page, but be redirected to a different section of the page, as you appear to be trying to do in your example, you want to be using an anchor.
In your example,
<div data-role="page" id="convertingpage">
<p> stuff on my second page</p>
</div>
you tried to do this with the id of you div, but to make an anchor you need to use an <a> tag.
Here's how I would do it, trying to stay as similar to your page a possible.
<div data-role="page" id="mainpage">
<h1>
<b>Converter App</b>
</h1>
</div>
<div class="app">
Convert
<div data-role="page">
<a id="convertingpage"></a>
<p> stuff on my second page</p>
</div>
</div>
Note the <a id="convertingpage"></a> anchor that the link redirects to. Also, I removed the id attribute from your second page div, so if you need it for styling, you should replace it.
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)...
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>
Is there a way to jump to a section on a different page when you click a link? I am a beginner, so I don't know JavaScript etc.
You don't need anything but HTML:
<a href="other-page.html#example">
and (on the other page):
<div id="example">
Wrap the part in a <div> and and define an ID to it. Like this:
<div id="loc">
Band then add an anchor tag with href set to that id:
<a href="#loc">
This will take the screen to that part the the referenced ID.
hey I have a new dilemma.....
I have 3 div like 3 boxes and in each div there is an image and some text written and i want that when i click anywhere in any if the box then it will go to the other page e.g. if i am on home page then on clicking on box then it will go to service.html page in the website.
I have done this by
<div onClick="document.location='service.html';">
and its working.but i want that when user click on first div then it go to service .html and in that particular section and on second box it will go to another section on service.html and so on.......
To be more clear, I want to link a div to a particular section to the particular page..
How can I do this??
You'll have to add an ID to the elements on the service.html page you want to link to, and then include them in your links:
<div onClick="window.location.href='service.html#section-1';">Go to Section 1</div>
<div onClick="window.location.href='service.html#section-2';">Go to Section 2</div>
P.S. Any reason you're using Javascript instead of regular anchor tags?
hey i have get ma answer......
<div onClick="document.location='service.html#section1_ID';">
<div onClick="document.location='service.html#section2_ID';">
<div onClick="document.location='service.html#section3_ID';">
and on that section I have used that particular
<div id="section1_ID">bla bla bla</div>
and so on.............
Look on below.
// jQuery method
$('.location').bind("click", function() {
window.location = $(this).data('location');
});
<div class="collection-item location"
data-location="service.html#section1_ID" >
Lorem ipsum, blah
</div>