Replacing a div with a command - html

i've got a site with a lot of phone models, but the code is originally from another part of the site, where the mobiles are only shown when you click on the box, but for this part of the site, I want the mobiles to be shown at anytime, so how do i make this div
<div class="submit_filter ans_div" style="display: table;"></div>'
into something that just shows without a click?
The site url are www.findaphone.dk/mobiler
And as you see, right now there is a big box at the top of the site you have to click on.
Thanks in advance!!

The JavaScript for this click event is at line 620 of your source code. CTRL+F to find it, it looks like this:
$(document).on('click','.submit_filter',function () {
Right now, the line is waiting for a click event on that large button (.submit_filter) before executing the code. Replace the line above with this, and the code in that function will trigger on document ready (when the page loads):
$(document).ready(function () {

Related

Targeting ID of an element isn't working.

I'm having problem on the page I'm working with, I'm trying to set a permalink with an id so that if the page is fully loaded, it would show the page and it focuses on the element with the ID as its top of the page. But the scenario here, after the focus goes to the ID, eventually the view goes to the top of the page.
The page view should go to the heading that says "Care facilities with rest home and hospital level care"
http://metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility
What could a quick fix. Not familiar with the issue.
Any help would be greatly appreciated.
Like Evan Knowles said you need to add names to your anchors for the browser to be able to browse there.
Replace
<a id="trigger-sa" href="http://metlifecare.staging.wpengine.com/living-at- metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
with
<a id="trigger-sa" name="care-facility" href="http://metlifecare.staging.wpengine.com/living-at-metlifecare/metlifecare.staging.wpengine.com/living-at-metlifecare/assisted-living#care-facility"></a>
I see what you are referring to as the 'jump to the top'. It looks like this piece of code make the entire page block and then jumps to the top
<script type="text/javascript">
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
</script>
Removing that code stop the jump and makes the #care-facility work correctly.
I have never worked with html2canvas, so I can't comment on what it is doing.

Multiple links with delay

I was wondering how to make a link, that when clicked it would open 2
links: One would open in a new tab instantly Second one would open in
a new window after a minute or so.
I also want to embed this in a website like weebly.
This is an edit to make things simpler -
linky
two opens one click
This sounds very spammy and not recommended but if you were to do it, I would do it a separate function rather than in line in the onclick html attribute.
Try the below. It will give a 5 second time gap between links.
function openPage1() {
window.open(url1);
window.setTimeout(openPage2,5000);
}
function openPage2() {
window.open(url2);
}
// Just call openPage1 from your button click handler
openPage1();

How do I set a link that will have the link look and fell but with no file (the content of the link will be in the same file with the link)

I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>

Highlight link with click

I'd like to create a link that when it is clicked it will open up a some sort of dialog with some text a user can copy.
I was going to use jquery ui dialog for this but I'm wondering if there is something else I should consider?
Ideally I'd like to have that text highlighted so it is ready to copy. Don't think I can do this with jquery dialog?
Any guidance would be appreciated.
Try this :
HTML :
<div id="dialog">
<textarea id="textbox">some text to copy and paste</textarea>
</div>​
JavaScript:
$('#dialog').dialog();
$('#textbox').focus().select();​
This opens a dialog and then selects all of the text within the textarea. Because the focus function is used you can Ctrl+C straight off as the text is already in focus and selected.
Working demo : http://jsfiddle.net/eZbXD/
Instead of opening a dialog, you can show a textbox in which the link is selected and ready to copy. I have done something like that before. Look at this fiddle. You can remove unnecessary codes and give some style according to your need.

How to make tabs on the web page?

How to make tabs on the web page so that when click is performed on the tab, the tab gets css changed, but on the click page is also reloaded and the css is back to original.
dont use the jquery :D
all of what you needs a container, a contained data in a varable and the tabs
the container is the victim of the css changes.
the tabs will trigger the changing process.
if you have a static content, you can write this into a string, and simply load it from thiss.
if you have a dinamically generated content, you need to create ajax request to get the fresh content, and then store it in the same string waiting for load.
with the tabs you sould create a general functionusable for content loading.
function load(data) {
document.getElementById("victim").innerHTML = data;
}
function changeCss(element) {
//redoing all changes
document.getElementById("tab1").style.background="#fff";
document.getElementById("tab2").style.background="#fff";
element.style.background = "#f0f";
}
with static content the triggers:
document.getElementById("tab1").onclick = function() {load("static data 1");changeCss(document.getElementById("tab1"))};
document.getElementById("tab2").onclick = function() {load("static data 2");changeCss(document.getElementById("tab2"))};
if you want to change the css, you need another function which do the changes.
i tell you dont use the jquery because you will not know what are you doing.
but thiss whole code can be replaced by jquery like this:
$("tab1").click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 1");
});
$("tab12click(function(e) {
$("#tab1 | #tab2").each(function() {
$(this).css("background","#fff"); });
$(this).css("background","#00f");
$("#victim").append("static content 2");
});
if you know how javascript works then there is noting wrong with the jquery, but i see there is more and more people who just want to do their website very fast and simple, but not knowing what are they doing and running into the same problem again and again.
Jquery UI Tabs:
http://jqueryui.com/demos/tabs/
Have a <A href tag around the "tab" and use onClick to fire some Javascript that changes the CSS.
If you do not want use Jquery for creating of UI tabs, please see my cross-browser JavaScript code: GitHub.
You can use different ways to create tabs and tab content.
Tab content can added only when tab gets focus.
You can remember selected tab. Selected tab opens immediatelly after opening of the page.
You can create tabs inside tab.
Custom background of the tab is available.
Example: Tabs