I have a page (http://www.gardensandhomesdirect.co.uk/newhomepage)
I want to make the center column (#content-column) 930px for this page only, which will eventually become the homepage.
The CMS used is NetSuite, and is notoriously difficult to work with.
What is the best way to do this? Is it possible with just CSS/HTML commands or JavaScript?
Since it's a CMS you probably cannot add markup easily so I'm thinking some jQuery would be a simple solution here...
$(function () {
var path = location.pathname.substring(1);
if (path) {
var regex = new RegExp('newhomepage$', 'gi');
if (regex.test(path)) $('#content-column').addClass('yourClass');
}
});
This should add "yourClass" to the element just on that page.
Then you can add to your external CSS...
.yourClass {
width: 930px !important;
}
I feel your pain
I have used Netsuite extensively and found )after many hours of hair pulling and expletives) that the best solution (for us) has been to create the home page and any unique landing pages as Hard coded Hosted pages (hosted on Netsuite) and reserve Netsuite's CMS system for item pages where you need the add to cart functionality.
Take it from me in the long run it'll save you hours of frustration :-)
Of course you can use Netsuite tags all over the place as long as you host the pages in your "site" folder
I have no experience with Netsuite so please take this as is..
I would try to add a custom style tag to the document like this:
<style>
#content-column{
width:930px !important;
}
</style>
If you only have access to the HTML of that page, then put an inline style attribute in the center column's HTML. Example:
<div id="content-column" style="width: 930px;">
Related
I'm inexperienced at coding and trying to build a pretty simple site with some HTML and CSS in Dreamweaver. I'd like my navigation menu to highlight the current page a viewer is looking at, and I've found different ways to do this. However, to make life easier as the site evolves, I've made the navigation menu an uneditable region of a template. I'm therefore finding myself unable to make the coding changes (e.g., giving a unique class to each link or a unique body id to each page) to each page that would seemingly allow me to highlight the current page link. Thanks!
A simple way to do this is with Dreamweaver template attributes which allow you to have editable tag attributes:
https://helpx.adobe.com/dreamweaver/using/defining-editable-tag-attributes-templates.html
While editing your template, if you put your cursor on the nav item class, you could then go to Modify > Templates > Make Attribute Editable.
Then, when editing the page based on the template, you'll be able to add an active class.
You could use jQuery for this to detect a word in url:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
if(window.location.href.indexOf("contact") >= 0){
$(".contactLink").addClass("active");
}
});
</script>
<style>
.active { color: black; font-weight: bold }
</style>
contact
This could add a class to the menu item that has the word "contactLink" as a class. So long as you have this js on all pages (put it in a file rather than hard coded on all pages) it will work. If you copy the above code into a page called test.html the link is normal. change the name to contact.html and it goes black..
Give each menu item a class, and then duplicate the code above for however many items you have.
There are more dynamic ways of doing it, but if you don't have millions of pages, is a nice easy way.
I'm using HTML examples on my website (using Crayon) and want to show output as well.
But I want the output to show as pure as it would have without any of my website's own stylesheets.
I can of course do this with an iframe, but that seems tedious. Is there perhaps another trick or library that anyone is aware of?
Thanks
Ended up doing this. Works well...
$('.crayon-title').click(function() {
var content = $(this).parent().siblings('.crayon-plain-wrap').children('textarea').text();
var x=window.open();
x.document.open();
x.document.write(content);
x.document.close();
})
I know bootstrap, semanticUI, foundation, etc.
My new project is a part of an old website. and we want to start implementing the new features with a normal css framework.
So, how do to implement a partial view?
lets say a with a framework css without rebuilding all the website from scratch ?
<body> <!-- regular old website css -->
<div class="old"></div>
<div class="everything-in-here-using-css-framework"></div>
</body>
is that possible? which framework support this ?
i don't fully understand but i think you can follow these steps:
make sure there are no matching conflicting class names with your framework (in foundation for example: columns, small-12, etc...)
include the framework's CSS file (you can link to a cdn just for testing)
start writing some new html elements and see how it goes.
if crashes occure (probably they will) start to change the old elements name - for instace add "old-" to every class you have.
another approach could be to move the existing project to SASS, then wrap the old CSS in a container like this
.old {
header { ... }
div { ... }
}
and put all the framework styles in something like this:
.new {
...
}
I think we'd be more helpful if you'll give more details.
Using mootools.js 1.3.2 and mootools-more.js
As far as I can tell this is supposed to reveal the div and also hide the content and linkTab divs at the same time.
$('blogLink').addEvent('click', function(){
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
});
This is the HTML
Blog
<div id="blogContent">
content here
</div>
It all works properly and that's OK but in addition to this, I also want to be able to give people a URL like http://mysite.com/#blogLink and have that blogContent div opened. When I do that now, it takes me to the top of the page and the blogContent div is hidden.
How do I do achieve that? I did try adding the mootools-smoothscroll.js and using the method outlined here http://davidwalsh.name/smooth-scroll-mootools but that just broke the entire page - would not load properly.
I have zero experience with mootools and weak on Javascript so please excuse me if I take a while to 'get' what you're trying to explain.
Many thanks.
First, are you particularly attached to MooTools? If you're a JavaScript newbie, jQuery is probably easier to use and definitely has a larger support community. But I'll post a solution that should work in MooTools for now:
If I understand you correctly, what you want to achieve is the following:
The anonymous function you posted will run when "Blog" is clicked
The function will also run if someone visits the page with #blogLink in the URL.
That's not too difficult to achieve:
// Once the DOM has loaded - so that our elements are definitely available
window.addEvent('domready', function() {
// Check for #blogLink hashtag, and reveal blog
if(window.location.hash == 'blogLink') { revealBlog(); }
// Make sure blog is revealed when link is clicked
$('blogLink').addEvent('click', revealBlog);
});
function revealBlog() {
$('homeLink').removeClass('active');
$('linkTab').removeClass('active');
$('blogLink').addClass('active');
content.slideOut();
linkTab.slideOut();
blogLink.slideIn();
}
You could also change your link mark-up to:
Blog
To make sure they're always on the correct link when the blog is revealed.
I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );