I’d be very happy if someone could please help me out. I’m learning website design and JavaScript is presenting a few difficulties.
I have the following code on my webpage:
<script type="text/javascript">
if (matchMedia) {
var mquery = window.matchMedia("(max-width:601px )");
mquery.addListener(widthChange);
widthChange(mquery);
}
function widthChange(mquery) {
if (mquery.matches) {
document.getElementById;
}
else {
document.getElementById;
}
}
</script>
<script type="text/javascript">
if (matchMedia) {
var mq = window.matchMedia("(max-width:484px )");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {document.getElementById;
}
else {document.getElementById;
}
}
</script>
The scripts work when the if else statements are between their own opening/closing <script> tags (as per the above code), but not if I add them all to single opening/closing <script> tags. I wanted to move most of my JavaScript to an external file, so this is a bit of a dilemma. Only the first if (matchMedia) statement appears to work when I add both statements to an external JavaScript file.
What am I missing?
Thanks in advance!!!
I’ve removed unnecessary code after document.getElementById because it has no bearing with regards to the problem at hand.
I’m trying to design a responsive website, and I have 2 matchmedia if statements on my webpage. When I move these scripts to an external JavaScript file only the first if (matchMedia) statement will work.
Only the first if (matchMedia) statement will work in the following code:
<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);
mquery.addListener(widthChange);
widthChange(mquery);
}
function widthChange(mquery) {
if (mquery.matches) {
document.getElementById;
}
else {
document.getElementById;
}
}
if (matchMedia) {
var mq = window.matchMedia(“(max-width:484px )”);
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {document.getElementById;
}
else {document.getElementById;
}
}
</script>
Is this because the first statement interferes with the second statement? Do I need to “close” or keep the statements separate from one another?
I already have different names for the functions. Have I written the if (matchMedia) statements in the correct manner? How else would I code these scripts?
I have two separate events that occur when the window is minimized. At a max-width of 601px I need to display something; above 601px it is hidden. The same goes for when the window has a max-width of 484px.
The scripts work fine when they are separated:
<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);
mquery.addListener(widthChange);
widthChange(mquery);
}
function widthChange(mquery) {
if (mquery.matches) {
document.getElementById(‘foo’).style.display=‘block’;
}
else {
document.getElementById(‘foo’).style.display=‘none’;
}
}
</script>
<script type=“text/javascript”>
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:484px )”);
mquery.addListener(WidthChange);
WidthChange(mquery);
}
function WidthChange(mquery) {
if (mquery.matches) {
document.getElementById(‘bar’).style.display=‘block’;
}
else {
document.getElementById(‘bar’).style.display=‘none’;
}
}
</script>
They no longer work when they follow one another in an external JavaScript file.
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:601px )”);
// rest of code here
}
if (matchMedia) {
var mquery = window.matchMedia(“(max-width:484px )”);
I have tried other function names but they haven’t made any difference.
For the time being, I’m going to include one of the scripts in my webpage <head> and the other one in my external JavaScript file, until I find another solution.
There are plenty of other problems that require my attention!